说起前端代码风格，相信大家都能想到 eslint 和 prettier，但是一来 eslint 配置项繁杂，二来这两样东西会发生冲突，三则风格因人而异，配置项并无优劣之分，四则已有项目的代码太多，确定一种代码代码风格虽然重要却难以推行。本文只给出一种“能用”的风格配置，且只针对 vscode 编写 vue2 代码，至于具体配置项该如何配置等问题不做讨论。

eslint 和 prettier

　　第一步，当然是安装两个编辑器（vscode）插件：eslint 和 prettier，主要是为了在开发时检测不妥之处，出现波浪线提示。然后把 prettier 设为默认格式化工具，它可以格式化很多种类型的文件，包括 html/js/json/jsx/css/less/scss 等，详见官方文档。prettier 格式化的文件不包含 stylus 文件，如果用到了 stylus，需要安装 Manta's Stylus Supremacy 插件，但是对它的配置，得是在编辑器中配置，不太方便跟着项目走。如果是在 vue 文件中，也可以用 vetur 插件进行格式化（vetur 的配置也依赖于编辑器，且仅对 vue 文件生效）。

　　第二步，安装依赖：

npm i -D eslint@latest prettier@latest eslint-config-prettier@latest eslint-plugin-prettier@latest vue-eslint-parser@latest eslint-plugin-vue@latest

　　如果是前端代码与 node 代码放并列文件夹的项目，建议在最外层初始化 npm，并执行该命令，然后在前端代码根目录和 node 代码根目录都执行：

npm i -D eslint@latest

　　之所以要特别安装 eslint 是因为我实验发现 eslint 的加载路径不是恒定的，刚打开 vscode 会使用离当前文件最近的 node_modules 目录的 eslint 包，而切换文件之后加载目录可能会变也可能不变，因为无法保证 node_modules 文件夹中不会有其他版本的 eslint，为保险起见，在每个目录下都安装相同版本的该依赖包。

　　之后，在最外层目录新增以下文件：

.eslintrc.js

module.exports = {
    root: true,
    parser: 'vue-eslint-parser',
    parserOptions: {
        sourceType: 'module',
        ecmaVersion: 2021,
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/recommended',
        'plugin:prettier/recommended',
    ],
    rules: {
        // 自定义规则，可覆盖上面的扩展配置
    },
    env: {
        node: true,
        browser: true,
    },
};

　　某些情况下（比如用到了装饰器之类的非标准语法，vue-eslint-parser 不能解析），eslint 解析器需要改成 babel，如下：

npm i -D eslint@latest @babel/core@latest @babel/eslint-parser@latest @babel/preset-env@latest

module.exports = {
    root: true,
    parser: 'vue-eslint-parser',
    parserOptions: {
        parser: '@babel/eslint-parser',
        sourceType: 'module',
        ecmaVersion: 'latest',
        babelOptions: {
            configFile: './babel.config.js',
        },
    },
    extends: [
        'eslint:recommended',
        'plugin:vue/recommended',
        'plugin:prettier/recommended',
    ],
    rules: {
        // 自定义规则，可覆盖上面的扩展配置
    },
    env: {
        node: true,
        browser: true,
    },
};

此时，最外层需要新增 babel.config.js 文件：

module.exports = {
    presets: ['@babel/preset-env'],
};

.prettierrc.js

module.exports = {
    semi: true,
    singleQuote: true,
    useTabs: false,
    tabWidth: 4,
    printWidth: 100,
    endOfLine: 'lf',
    trailingComma: 'es5',
    arrowParens: 'always',
};

　　这样 eslint + prettier 就配置完成了，具体配置项可再行斟酌。

　　这两个插件可能会有冲突，按照本文完整的配置，以 prettier 优先，凡是 prettier 格式化出来的结果 eslint 不会报错。

校验样式文件

　　对于后缀为 css/less/scss 的文件，在最外层目录运行：

npm i -D stylelint stylelint-config-prettier stylelint-prettier stylelint-config-standard stylelint-order

最外层目录添加 stylelint.config.js 文件：

module.exports = {
    extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
    plugins: ['stylelint-order', 'stylelint-prettier'],
    rules: {
        'prettier/prettier': true,
        'order/order': [],
        'order/properties-order': [],
        'order/properties-alphabetical-order': true,
    },
};

　　为便于使用，建议也安装编辑器插件 stylelint。
如果使用 stylus，请见下文。

强制提交校验

　　在最外层目录执行以下命令：

npm i -D pre-commit lint-staged@10

　　之所以指定版本号，是因为我在试验过程中，发现有些依赖包对 npm 版本有要求，比如lint-staged v11 就要求 node 12.13.0，而我们线上机器是 node10，为防因版本不同造成预期外的事故，本地也是使用相同版本的，因此只能安装老版本。

　　在最外层目录的 package.json 中增加如下配置：

    "scripts": {
        "pre-commit": "lint-staged" // script 中需加这一句
    },
    "pre-commit": [
        "pre-commit"
    ],
    "lint-staged": {
        "*.(css|scss|less|vue)": [
            "prettier --write",
            "stylelint --fix"
        ],
        "*.(js|vue)": [
            "prettier --write",
            "eslint --fix --color"
        ],
        "*.(html|json)": [
            "prettier --write"
        ]
    },

　　即可在执行git commit时先使用 prettier 格式化各种类型的文件，然后 eslint 或 stylelint 进行代码检查并自动修复，如不能自动修复的会报错，自行修改后方能提交（必要情况下需强制提交）。

stylus

 　　之前校验 js/less 时，都是有编辑器插件读取配置文件，提交又能根据该配置文件进行校验检测的。而 stylus 不同，我发现有两种办法：

　　1. 安装 Stylus Supremacy 的 vscode 插件和 npm 包，增加配置文件 .stylintrc，编写后缀为 styl 的文件时可以用该插件格式化，vue 文件可以使用 vetur 格式化，但是格式不符合要求时不会出现波浪线提示。提交时可以用命令的形式强制调用该 npm 包进行格式化，也可以运行 lint 命令检测代码质量，但是不能对于警告自动进行修复。

　　2. 同上述 less 一样，使用 stylelint 进行校验，此时需要安装编辑器插件 stylelint、专用 npm 包 stylelint-plugin-stylus，并且增加配置文件 stylelint.config.js，这样一来，在编写时会有波浪线提示（仅限后缀为 styl 的文件），提交时可以调用校验并自动修复（但是效果不一定完美，可能需要调用多次），但是编写时不能通过快捷键进行格式化（如果是 vue 文件，可以通过 vetur 格式化）。另外注意，如果采纳该方案，需注意同一个后缀的文件中不能混有其他 css 预处理语言，因为校验时是以后缀区分要不要校验的，对不同语言的校验配置会发生冲突。

方案	编写时格式化	编辑器波浪线提示	提交时校验	提交时自动修复	其他说明
安装 Stylus Supremacy 的 vscode 插件和 npm 包，增加配置文件 .stylintrc	编写后缀为 styl 的文件时可以用该插件格式化，vue 文件可以使用 vetur 格式化（可以读取配置文件）	无	无	格式问题可以解决，其他代码质量问题不能	如果需要，可以安装 stylint 运行命令检测代码质量，但是不能对于警告自动进行修复。
同上述 less 一样，使用 stylelint 进行校验，此时需要安装编辑器插件 stylelint、专用 npm 包 stylelint-plugin-stylus，并且增加配置文件 stylelint.config.js	后缀为styl的文件不能格式化，vue 文件可以使用vetur格式化（不能读取配置文件，只能默认）	后缀为styl的文件有提示，vue 文件没有	支持	支持，但是效果不一定完美，可能需要调用多次	需注意同一个后缀的文件中不能混有其他 css 预处理语言，因为使用了stylelint，校验时是以后缀区分要不要校验的，对不同语言的校验配置会发生冲突。

　　综合考虑建议采纳方案一，并且需要修改编辑器的配置（后面有说明）。

　　方案二与上述介绍校验 less 操作类似，只是改一下插件配置和校验命令。如果采纳方案一，需要先安装 vscode 插件 Manta's Stylus Supremacy ，并在最外层目录新增 .stylintrc 文件锁定格式化选项，参考官方文档：

{
    "blocks": false,
    "brackets": "always",
    "colons": "always",
    "colors": "always",
    "commaSpace": "always",
    "commentSpace": "always",
    "cssLiteral": "never",
    "customProperties": [],
    "depthLimit": false,
    "duplicates": true,
    "efficient": "always",
    "exclude": [],
    "extendPref": false,
    "globalDupe": false,
    "groupOutputByFile": true,
    "indentPref": 4,
    "leadingZero": "never",
    "maxErrors": false,
    "maxWarnings": false,
    "mixed": false,
    "mixins": [],
    "namingConvention": false,
    "namingConventionStrict": false,
    "none": "never",
    "noImportant": true,
    "parenSpace": false,
    "placeholders": "always",
    "prefixVarsWithDollar": "always",
    "quotePref": false,
    "reporterOptions": {
        "columns": [
            "lineData",
            "severity",
            "description",
            "rule"
        ],
        "columnSplitter": " ",
        "showHeaders": false,
        "truncate": true
    },
    "semicolons": "always",
    "sortOrder": "alphabetical",
    "stackedProperties": "never",
    "trailingWhitespace": "never",
    "universal": false,
    "valid": true,
    "zeroUnits": "never",
    "zIndexNormalize": false
}

　　修改 vscode 编辑器的配置，因每个人的配置不同，我们只需要保证同一个项目所必须的编辑器配置相同就可以了。在项目根目录创建文件 .vscode/settings.json：

{
    "files.autoSave": "onFocusChange",
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[stylus]": {
        "editor.defaultFormatter": "thisismanta.stylus-supremacy"
    },
    "vetur.format.defaultFormatter.html": "prettier",
    "vetur.format.defaultFormatter.pug": "prettier",
    "vetur.format.defaultFormatter.css": "prettier",
    "vetur.format.defaultFormatter.postcss": "prettier",
    "vetur.format.defaultFormatter.scss": "prettier",
    "vetur.format.defaultFormatter.less": "prettier",
    "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatter.ts": "prettier",
    "vetur.format.defaultFormatter.sass": "sass-formatter"
}

　　最后提一下，配置时当留意输出面板 eslint 和 prettier 等插件的信息，不要有报错，配置完成后需重启 vscode 才能生效。

　　以上是我最近反复尝试的结果，精力有限，难免有偏颇之处，欢迎批评指正！