vscode + eslint、stylelint、prettier代码规范工作流搭建详解基于 umijs 生成的项目，

概述

基于 umijs 生成的项目，结合 eslint、stylelint、prettier，在 vscode 上搭建代码规范校验和格式化工作流

创建项目

在新建的空项目目录命令行下执行：

yarn create @umijs/umi-app
# 或 npx @umijs/create-umi-app

创建好后安装依赖：

yarn

安装eslint、stylelint、prettier的相关依赖

eslint 相关依赖

yarn add -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-config-alloy

PS:

工作流用了 AlloyTeam 的 eslint-config-alloy 配置
上述依赖适配 TypeScript React，如果需要 vue 或者原生，请参考eslint-config-alloy 的使用方法
如果不是基于 umijs，而是从一个全新的项目开始搭建，有可能会报错： Error: Failed to load parser '@babel/eslint-parser' declared in '.eslintrc.js » eslint-config-alloy » ./base.js': Cannot find module '@babel/core/package.json'，详细可以参考这个 issue

stylelint 相关依赖

yarn add -D stylelint stylelint-config-css-modules stylelint-config-idiomatic-order stylelint-config-prettier stylelint-config-standard stylelint-order

PS:

上述依赖中的 stylelint-config-css-modules、stylelint-config-idiomatic-order、stylelint-order，都是适配团队的一些额外配置，了解后如果觉得不需要，可以不安装，然后在配置文件中删除对应配置即可

prettier 相关依赖

yarn add -D prettier

完善配置文件

在项目根目录添加以下文件：

.eslintignore
.eslintrc.js
.stylelintrc.js
.prettierignore
.prettierrc.js
- ps：如果用 umijs 创建项目，默认有一个 .prettierrc 文件，将其重命名为 .prettierrc.js（实际上是一样的，只是方便好看）

eslint 相关配置

.eslintignore：

/lambda/
/scripts
/config
.history
public
dist
.umi
mock

.eslintrc.js:

module.exports = {
  extends: ['alloy', 'alloy/react', 'alloy/typescript'],
  env: {
    // 你的环境变量（包含多个预定义的全局变量）
    //
    // browser: true,
    // node: true,
    // mocha: true,
    // jest: true,
    // jquery: true
  },
  globals: {
    // 你的全局变量（设置为 false 表示它不允许被重新赋值）
    //
    // myGlobal: false
  },
  rules: {
    /* 可以用 == 也可以用 === */
    eqeqeq: ['off', 'always'],

    /* 禁用对 key 的检查，antd 中如 Form.Item 可以用 name 代替 key，但是这条规则没有兼容到，所以先禁用 */
    'react/jsx-key': ['off', 'always'],
  },
};

stylelint 相关配置

.stylelintrc.js:

module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-config-css-modules',
    'stylelint-config-prettier',
    'stylelint-order',
    'stylelint-config-idiomatic-order',
  ],
  rules: {
    'selector-class-pattern': /^[-_a-zA-Z0-9]+$/,
  },
  ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
};

prettier 相关配置

.prettierignore:

**/*.svg
package.json
.umi
.umi-production
/dist
.dockerignore
.DS_Store
.eslintignore
*.png
*.toml
docker
.editorconfig
Dockerfile*
.gitignore
.prettierignore
LICENSE
.eslintcache
*.lock
yarn-error.log
.history
CNAME
/build
/public

.prettierrc.js:

module.exports = {
  /* 一行最多 100 字符 */
  printWidth: 100,

  /* 使用单引号 */
  singleQuote: true,

  /* 末尾需要有逗号 */
  trailingComma: 'all',
};

添加 vscode 的 setting.json 配置

在项目根目录创建 .vscode 目录，并在这个目录下创建 settings.json 文件

settings.json：

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  },

  "eslint.alwaysShowStatus": true,
  "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],

  "css.validate": false,
  "less.validate": false,
  "scss.validate": false
}

PS:

setting 配置写在 vscode 全局中也 ok，只是目前团队有多个老项目，放全局，如果改一些老项目，很容易一键格式化调，可能会有问题，所以暂时先放在特定项目中

安装相关插件并重启 vscode

安装以下 vscode 插件：

PS:

如果发现改了“完善配置文件”小节中的配置，但是 vscode 不生效，可以尝试重启 vscode，让插件重新加载