Vue项目配置ESLint实现统一项目代码规范

1.安装需要的包

npm install eslint eslint-config-airbnb eslint-config-prettier eslint-import-resolver-webpack eslint-plugin-import eslint-plugin-prettier prettier eslint-plugin-vue '@babel/core' '@babel/eslint-parser' --save-dev

2.配置.eslintrc.js

1. 在项目的根目录下面创建.eslintrc.js
2. 配置eslint配置

module.exports = {
    root: true,
    env: {
        node: true,
        es6: true, 
    },

    extends: [
        'plugin:vue/recommended',
        'airbnb-base',
        'eslint:recommended',
        'prettier',
    ],
    plugins: ['prettier'],
    parserOptions: {
        parser: '@babel/eslint-parser',
    },

    rules: {
        'vue/max-attributes-per-line': [
            'error',
            {
                singleline: {
                    max: 3,
                },
                multiline: {
                    max: 3,
                },
            },
        ],
        'vue/multi-word-component-names': 0,
        'linebreak-style': 0,
        // 关闭对导入文件的校验
        'import/no-extraneous-dependencies': 0,
        'import/no-unresolved': 0,
        'import/extensions': 0,
    },
};

3.配置vsCode

vsCode打开文件-->首选项-->设置-->扩展-->ESlint-->Eslint: Options-->在settings.json中编辑,在settings.json中加入

    "eslint.enable": true,
    "eslint.autoFixOnSave": true,
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [".js", ".vue"]
    },
    "eslint.validate": [
        "javascriptvue",
        "vue",
        "javascript",
        {
            "language": "vue",
            "autoFix": true
        },
        "html",
        {
            "language": "html",
            "autoFix": true
        }
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

至此ESLint配置完成，重启项目后即可看到ESLint生效了

eslint --fix 可自动修复代码至eslint配置的规范 但是有很多项目都是中途引入的ESLint，如果一个个的去fix的话比较费时，可使用以下代码实现src文件下的代码全局修复至配置的代码规范

eslint src/**/*.* --fix

报错收集

Configuration for rule "camelcase" is invalid:     
Value {"properties":"never","ignoreDestructuring":false} 
should NOT have additional properties.

出现此错误是因为eslint与airbnb-base版本不兼容导致的，升级eslint版本可解决此问题

npm install eslint@latest -D