vue规范

一、代码规范

1.1 IDE插件

使用 Visual Studio Code 编译器，下载 ESLint 、Prettier - Code formatter、Stylelint 插件
点击编译器左上角文件> 首选项> 设置>右上角编辑json文件, 去掉编译器配置中的关于格式化和规范相关的配置，使编译器读取项目中的配置文件

{
    "breadcrumbs.enabled": true,
    "editor.renderControlCharacters": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
    },
    "editor.suggestSelection": "first",
    "explorer.confirmDelete": false,
    "vsicons.dontShowNewVersionMessage": true,
    "workbench.colorTheme": "Monokai",
    "explorer.compactFolders": false,
    //  #去掉代码结尾的分号
    "prettier.semi": false,
    //  #使用带引号替代双引号
    "prettier.singleQuote": true,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
}

1.2 ESLint

// 安装依赖
npm install eslint babel-eslint eslint-config-standard eslint-loader eslint-plugin-html eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue--save-dev

在项目下新建.eslintrc.js 文件
.eslintrc.js配置

module.exports = {
    env: {
        browser: true,
        node: true,
        es6: true,
        jest: true,
        commonjs: true,
    },
    extends: ['eslint:recommended', 'plugin:prettier/recommended', 'plugin:vue/essential'],
    parserOptions: {
        ecmaVersion: 2018,
        sourceType: 'module',
        ecmaFeatures: {
            experimentalObjectRestSpread: true,
            jsx: true,
        },
        parser: 'babel-eslint',
    },
    plugins: ['vue', 'prettier'],
    rules: {
        'prettier/prettier': 2,
        /**
         * 禁止使用debugger
         **/
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        /**
         * 禁止使用console
         **/
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        /**
         * 禁止使用 alert
         */
        'no-alert': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        /**
         * 禁止使用tab
         **/
        'no-tabs': 'off',
        /**
         * 首行缩进
         */
        indent: 'off',
        /**
         * 禁止或强制在代码块中开括号前和闭括号后有空格
         */
        'block-spacing': 'error',
        /**
         * 禁止出现未使用过的变量
         */
        'no-unused-vars': 'error',
        /**
         * 在“function”定义的左括号前强制使用一致的间距
         */
        'space-before-function-paren': 'off',
        /**
         * 禁止空格和 tab 的混合缩进
         */
        'no-mixed-spaces-and-tabs': 'error',
        /**
         * 禁止条件表达式中出现赋值操作符
         */
        'no-cond-assign': 'error',
        /**
         * 禁止对象字面量中出现重复的 key
         */
        'no-dupe-keys': 'error',
        /**
         * 数组的方法除了 forEach 之外，回调函数必须有返回值
         */
        'array-callback-return': 'error',
        /**
         * 箭头函数体必须由大括号包裹
         * @reason 代码格式问题，最好由 Prettier 解决
         */
        'arrow-body-style': 'error',
        /**
         * 在箭头函数中的箭头前后强制保持一致的间距
         */
        'arrow-spacing': [2, { before: true, after: true }],
        /**
         * 将 var 定义的变量视为块作用域，禁止在块外使用
         * @reason 已经禁止使用 var 了
         */
        'block-scoped-var': 'error',
        /**
         * 变量名必须是 camelCase 风格的
         * @reason 很多 api 或文件名都不是 camelCase 风格的
         */
        camelcase: 'error',
        /**
         * switch 语句必须有 default
         */
        'default-case': 'error',
        /**
         * switch 语句中的 default 必须在最后
         */
        'default-case-last': 'error',
        /**
         * 必须使用 === 或 !==，禁止使用 == 或 !=
         */
        eqeqeq: 'off',
        /**
         * 属性使用双引号
         */
        'jsx-quotes': ['error', 'prefer-double'],
        /**
         * 单行注释必须写在上一行
         */
        'line-comment-position': 'error',
        'max-depth': ['error', 5],
        /**
         * 限制一个文件最多的行数
         */
        'max-lines': 'off',
        /**
         * new 后面的类名必须首字母大写
         */
        'new-cap': [
            'error',
            {
                newIsCap: true,
                capIsNew: false,
                properties: true,
            },
        ],
        /**
         * 禁止对使用 const 定义的常量重新赋值
         */
        'no-const-assign': 'error',
        /**
         * 禁止解构赋值时出现同样名字的的重命名，比如 let { foo: foo } = bar;
         */
        'no-useless-rename': 'error',
        /**
         * 禁止没必要的 return
         */
        'no-useless-return': 'error',
        /**
         * 禁止使用 var
         */
        'no-var': 'error',
        /**
         * 禁止变量申明时用逗号一次申明多个
         */
        'one-var': ['error', 'never'],
        /**
         * 使用分号
         */
        semi: ['error', 'never'],
        'vue/camelcase': 'error',
        /**
         * 修复 no-unused-vars 不检查 jsx 的问题
         */
        'vue/jsx-uses-vars': 'error',
        /**
         * 组件名称必须和文件名一致
         */
        'vue/match-component-file-name': 'off',
        /**
         * 禁止出现重复的属性
         */
        'vue/no-duplicate-attributes': [
            'error',
            {
                allowCoexistClass: false,
                allowCoexistStyle: false,
            },
        ],
        /**
         * 禁止修改组件的 props
         */
        'vue/no-mutating-props': 'error',
        /**
         * 禁止出现语法错误
         */
        'vue/no-parsing-error': 'error',
        /**
         * 组件的 name 属性静止使用保留字
         */
        'vue/no-reserved-component-names': 'error',
        /**
         * 禁止覆盖保留字
         */
        'vue/no-reserved-keys': 'error',
        /**
         * 禁止在计算属性中对属性修改
         */
        'vue/no-side-effects-in-computed-properties': 'error',
        /**
         * 禁止