eslint / prettier 检查格式配置、husky / lint-staged 强制校验、tslint 配置

eslint / prettier 检查格式配置

eslint 和 prettier 区别

eslint（包括其他一些 lint 工具）的主要功能包含代码格式的校验，代码质量的校验。而 Prettier 只是代码格式的校验（并格式化代码），不会对代码质量进行校验。代码格式问题通常指的是：单行代码长度、tab长度、空格、逗号表达式等问题。而代码质量问题指的是：未使用变量、三等号、全局变量声明等问题。

对 Prettier（或 Eslint） 进行配置：

• 根目录创建 .prettierrc.js / .eslintrc.js 文件，能够写入 YML、JSON 的配置格式，并且支持 .yaml/.yml/.json/.js 后缀；
• 在 package.json 中新建 prettier / eslintConfig 属性。

一些规则的配置

'off': 表示关掉，
'wran': 表示发出警告
'error': 表示发出错误

/*对应的数字是 */
0：表示关掉
1：表示发出警告
2：表示发出错误

"always": 总是开启
"never": 从不开启

vue 实例

安装

yarn add -D @vue/cli-plugin-eslint babel-eslint eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier

module.exports = {
   
  root: true,
  extends: ["eslint:recommended", "plugin:vue/essential", "plugin:prettier/recommended"],
  parser: "vue-eslint-parser",
  parserOptions: {
   
    parser: "babel-eslint",
    sourceType: "module",
    allowImportExportEverywhere: true
  },
  env: {
   
    browser: true,
    node: true,
    es6: true
  },
  globals:{
    // 全局变量
    "store":false,
    "Vue":true,
    "Vuex":true
  },
  plugins: ["prettier"],
  ignorePatterns: ["dist/**", ".gitignore"], // 忽略文件
  rules: {
   
    "prettier/prettier": [ // 内部配置 prettier
      1,
      {
   
        semi: false, // 格式化不加分号
        printWidth: 200, // 一行的字符数，如果超过会进行换行，默认为80
        singleQuote: false, // 字符串是否使用单引号，默认为false，使用双引号
        trailingComma: "none", // 是否使用尾逗号，有三个可选值"<none|es5|all>"
        bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{
    foo: bar }
        jsxBracketSameLine: true // JSX 标签闭合位置，默认false，换行闭合
      } // prettier 配置项
    ],
    semi: [1, "never"]
    // 公共 rules 配置
  }
};

react 实例

安装

yarn add -D babel-eslint eslint eslint-config-prettier eslint-plugin-prettier eslint-config-react-app eslint-plugin-react-hooks eslint-plugin-react prettier

配置 autoFix

# 修复指定路径文件
"fix": "eslint --fix --ext .js,.ts,.tsx --ignore-path .gitignore src/"

# 修复所有文件
"fix": "eslint --fix --ext .js,.ts,.tsx --ignore-path .gitignore ."

module.exports = {
   
  root: true,
  extends: ["react-app", "eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
  parserOptions: {
   
    parser: "babel-eslint",
    sourceType: "module",
    allowImportExportEverywhere: true
  },
  env: {
   
    browser: true,
    node: true,
    es6: true
  },
  plugins: ["prettier", "react-hooks"],
  rules: {
   
    "prettier/prettier": [
      1,
      {
   
        semi: false, // 格式化不加分号
        printWidth: 200, // 一行的字符数，如果超过会进行换行，默认为80
        singleQuote: false, // 字符串是否使用单引号，默认为false，使用双引号
        trailingComma: "none", // 是否使用尾逗号，有三个可选值"<none|es5|all>"
        bracketSpacing: true, // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
        jsxBracketSameLine: true, // JSX 标签闭合位置，默认false，换行闭合
      }
    ],