代码校验和格式化

 

eslint

 

通用配置

eslint 使用版本优先级 项目安装 eslint（推荐使用） 全局安装的 eslint

 

忽略文件

一般用于第三方 lib 库， 自动生成代码等。

 

// .eslintignore 文件
/assets/js/iconfont/*
/src/service/*
/dist
**/iconfont/**
*/qiyu.ts

 

禁用规则

全局禁用需要去配置文件设置规则，不再赘述。

禁用这个文件推荐使用忽略文件配置，不再赘述。

示例局部禁用某条规则的场景，非必要不推荐使用

 

// 区间内全部禁用 禁止使用console和 alert
/* eslint-disable no-alert, no-console */
alert("foo");
console.log("bar");
/* eslint-enable no-alert, no-console */

// 下一行禁用 禁止使用console规则
/* eslint-disable-next-line no-console */
console.log("bar");

// 当前行禁用 禁止使用console规则
console.log("bar"); /* eslint-disable-line no-console */

 

Vue3 eslint 推荐配置

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/typescript/recommended", // 如果有ts
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    "no-console": "warn",
    "no-debugger": "warn",
    "@typescript-eslint/no-var-requires": 0,
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-empty-function": 0,
    "vue/no-deprecated-slot-attribute": 0,
    "@typescript-eslint/no-explicit-any": 0,
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/no-inferrable-types": "off",
    "prettier/prettier": 0,
    "prefer-const": 0,
    "vue/multi-word-component-names": 0,
    "@typescript-eslint/no-this-alias": [
      "error",
      {
        allowDestructuring: true, // Allow `const { props, state } = this`; false by default
        allowedNames: ["_self"], // Allow `const vm= this`; `[]` by default
      },
    ],
    "@typescript-eslint/ban-types": 0, // allow Function type
  },
  // ignorePatterns: ['**/*/*.js'],
};

 

 

React eslint 推荐配置

module.exports = {
  extends: [require.resolve("@umijs/fabric/dist/eslint")],
  rules: {},
  globals: {
    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
    page: true,
    REACT_APP_ENV: true,
  },
};

 

stylelint

配置读取优先级， 一旦发现它们中的任何一个，将不再继续进行查找，进行解析，将使用解析后的对象。

• package.json 中的 stylelint 字段
• .stylelintrc 可以使用 JSON 或 YAML 或 JS 后缀名。默认按 JSON 解析
• stylelint.config.js
• stylelint.config.cjs

推荐配置

const fabric = require("@umijs/fabric");

module.exports = {
  ...fabric.stylelint,
};

 

如何局部禁用某条规则

.test {
  // 下一行禁用禁止使用import 规则
  /* stylelint-disable-next-line declaration-no-important */
  color: #fff !important;
}
.test {
  // 当前行禁止使用import 规则
  color: #fff !important; /* stylelint-disable-line declaration-no-important */
}

// 禁用区间内所有import 规则
/* stylelint-disable selector-no-id, declaration-no-important  */
.test {
  color: #fff !important;
  background-color: #fff !important;
}
/* stylelint-enable */

 

prettier

配置文件

// .prettierrc or prettier.config.js or .prettierrc.js
{
  "singleQuote": true, // 使用单引号
  "printWidth": 115,
  "proseWrap": "always",
  "semi": true, // 不加分号
  "trailingComma": "none", // 结尾处不加逗号
  "htmlWhitespaceSensitivity": "ignore" // 忽略'>'下落问题
}

 

特别注意的是， 当只使用 git hooks 就行代码格式化的时候，当提交的时候，会出现你没编辑过的文件被添加到 git 暂存区的情况。

配置文件优先级

Prettier configuration file

.editorconfig

Visual Studio Code Settings (Ignored if any other configuration is present)

 

配合 eslint 使用

在 ESlint 推出 --fix 参数前，ESLint 并没有自动化格式代码的功能，要对一些格式问题做批量格式化只能用 Prettier 这样的工具。并且，Prettier 在代码风格的检测上比 ESlint 更全面，所以两者通常是结合在一起使用的。

但是两者会有一些规则是相互冲突的要怎么配合起来使用呢。

1.安装依赖

$ npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier

2.设置配置文件

 // .eslintrc.js
 {
   "extends": ["plugin:prettier/recommended"]
 }
 // .prettierrc
 {
   "singleQuote": true
}

3.如果有使用到一些 ESLint 插件（如 eslint-plugin-react），需要禁掉这些插件中与 Prettier 冲突，所以需要添加 "prettier/react"。

 {
   "extends": [
     "plugin:prettier/recommended",
     "prettier/flowtype",
     "prettier/react"
   ]
 }