vue项目中配置eslint+prettier+stylelint

背景

多人协作开发时，统一的代码风格会提高代码可阅读性、可维护性，提高开发、迭代的效率。减少以下几点问题的出现：

1. 低级错误：如重复定义同名对象的属性（由于默认代码不会报错，代码量多时，自检也会看不见）
2. 代码格式不统一重复覆盖频率高：迭代需求修改的可能仅仅几行代码，但查看代码修改记录，有大部分都是格式冲突，一直重复覆盖其他人的代码格式，开发体验不太友好，应少数服从多数，遵循业界普遍规律，切勿特立独行。
3. 代码冗余：不需要的组件、方法、变量、图片，特殊原因保留时应给予注释说明，否则应该及时删除。
4. 隐藏bug：有些变量未声明就进行使用

以下分享vue项目中配置了eslint+prettier+stylelint（不涉及业务代码，纯配置分享）

settings.json

vscode编译器进行配置

{
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 4,
    //   字体大小
    "editor.fontSize": 20,
    // #每次保存的时候自动格式化
    "editor.formatOnSave": true,
    // 添加 vue 支持
    "eslint.validate": [
        "vue",
        "html",
        "javascript"
    ],
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #这个按用户自身习惯选择
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
            // #vue组件中html代码格式化样式
        }
    },
    // 保存时自动格式化
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true
    },
    // 终端默认拉起git
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    // 主题
    "workbench.iconTheme": "material-icon-theme",
    // 格式化stylus, 需安装Manta's Stylus Supremacy插件
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分好
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    "stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
    "diffEditor.ignoreTrimWhitespace": true // 两个选择器中是否换行
}

.eslintrc.js

相关的规则可以查阅：
eslint.vuejs
rules

module.exports = {
    root: true,
    env: {
        node: true,
        es6: true
    },
    extends: ['eslint:recommended', 'plugin:vue/essential', '@vue/prettier'],
    rules: {
        /**
         * 引号 single、double
         */
        quotes: ['warn', 'single'],
        // 如果有冲突的话，优先eslint
        'prettier/prettier': 'off',
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        /**
         * vue中"props", "data", "computed", "methods", "setup"中未定义的变量、给予警告
         */
        'vue/no-unused-properties': [
            'warn',
            {
                groups: ['props', 'data', 'computed', 'methods', 'setup']
            }
        ],
        'no-undef': 'warn',
        /**
         * 禁止未使用过的变量
         */
        'no-unused-vars': [
            'warn',
            {
                args: 'none',
                ignoreRestSiblings: true
            }
        ],
        /**
         * 禁止定义前使用
         */
        'no-use-before-define': [
            'warn',
            {
                functions: false,
                classes: false,
                variables: false
            }
        ],
        'array-bracket-spacing': ['warn', 'never'],
        /**
         * 禁止空块语句 但允许catch
         */
        'no-empty': ['warn', { allowEmptyCatch: true }],
        'vue/custom-event-name-casing': 'off',
        'brace-style': [
            'warn',
            '1tbs',
            {
                allowSingleLine: true
            }
        ]
    },
    parserOptions: {
        parser: 'babel-eslint'
    }
};

.eslintignore

eslint忽略检查的文件

docker
build/*.js
public
dist
node_modules

.stylelintignore

build/*.js
src/assets
docker
public
dist
node_modules

.stylelintrc.js

module.exports = {
    extends: ["stylelint-config-standard"],
    /**
     * 本规则文件，主要对样式进行一些规则限制
     * 详细规则可以查看
     * https://stylelint.docschina.org/user-guide/rules/color-hex-length/#color-hex-length
     */
    rules: {
        // 缩进
        indentation: 4,
        // 不允许颜色缩写
        "color-hex-length": "long",
        // 指定 16 进制颜色的大小写。
        "color-hex-case": "lower",
        // 指定伪元素适用单冒号还是双冒号表示法。
        "selector-pseudo-element-colon-notation": "double",
        // 禁止零长度的单位。
        "length-zero-no-unit": true,
        // 禁止无效的 16 进制颜色。
        "color-no-invalid-hex": true,
        // 允许一行空行
        "max-empty-lines": 1,
        // 要求在块的开大括号之前必须有一个空格或不能有空白符。
        "block-opening-brace-space-before": "always",
        // 选择器列表的逗号后需要换行符或不允许使用空格。
        "selector-list-comma-newline-after": "always",
        // 忽略字体类型格式
        "font-family-no-missing-generic-family-keyword": null,
        // 尾符号
        "declaration-block-trailing-semicolon": null,
        "declaration-colon-space-after": "always"
    }
};

.prettierignore

src/common/auth/*
src/package.json
src/package-lock.json
src/yarn.lock
src/yarn-error.log
src/.babelrc
src/.browserslistrc
src/.eslintignore
src/assets
.gitignore
.prettierignore
.editorconfig
.DS_Store
.project
**/node_modules/*
**/.vscode/*
public/*
docker
**/*.yml
**/*.svg
**/*.png
**/*.jpg
**/*.gif
**/*.md
**/*.ejs
**/*.min.js
**/*.min.css

.prettierrc

{
    "tabWidth": 4,
    "singleQuote": false,
    "trailingComma": "none",
    "printWidth": 100,
    "proseWrap": "never",
    "bracketSpacing": true,
    "endOfLine": "lf",
    "overrides": [
        {
            "files": ".prettierrc",
            "options": {
                "parser": "json"
            }
        },
        {
            "files": "*.{css,sass,scss,less}",
            "options": {
                "parser": "less",
                "tabWidth": 4
            }
        }
    ]
}

package.json

以下部分版本号跟规则对应，如果设置了未生效，大概率版本问题，vscode也会给相应提示的。husky（作用：不符合相应规则，限制提交）也有版本限制，以下是普遍配置。

这个依赖最低也需要版本v7.0.0

参考：no-unused-properties

{
    "devDependencies": {
        "@vue/cli-plugin-babel": "^3.12.0",
        "@vue/cli-plugin-eslint": "^3.12.0",
        "@vue/cli-service": "^3.12.0",
        "@vue/eslint-config-prettier": "^6.0.0",
        "vue-template-compiler": "^2.6.10",
        "autoprefixer": "9.0.0",
        "babel-core": "^6.26.3",
        "babel-eslint": "^10.0.1",
        "eslint": "^5.16.0",
        "eslint-plugin-prettier": "^3.3.1",
        "eslint-plugin-vue": "7.0.0",
        "husky": "4.2.3",
        "less": "^4.1.1",
        "less-loader": "5.0.0",
        "lint-staged": "10.1.2",
        "prettier": "^2.2.1",
        "stylelint": "^13.2.1",
        "stylelint-config-standard": "^20.0.0",
        "stylelint-webpack-plugin": "^1.2.3"
    },
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "src/**/*.{js,vue}": [
            "eslint --max-warnings=0"
        ],
        "src/**/*.{less,css}": [
            "stylelint"
        ]
    }
}

踩坑心得：如果配置后不生效，更多时候是规则所需的依赖版本问题或者配置引起冲突，当eslint的配置与prettier同时设置一个规则时，应该统一，设置一个就好。如果是默认出现冲突，可考虑优先级问题，提高校验优先级。