eslint+prettier自动格式化

最近在初始化项目时，整理以下简略的eslint+prettier自动格式化的内容，适用于简单的项目格式化。

1.安装eslint、prettier

npm i eslint prettier -D

2.配置.eslintrc.json、.prettierrc文件

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true,
    "commonjs": true,
    "jest": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2017,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "legacyDecorators": true
    }
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended",
    "prettier/react",
    "plugin:react-hooks/recommended"
  ],
  "plugins": ["@typescript-eslint", "prettier", "react", "react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
    "react-hooks/exhaustive-deps": "warn", // 检查 effect 的依赖
    "no-undef": "warn",
    "max-lines": [
      "error",
      {
        "max": 600,
        "skipBlankLines": true,
        "skipComments": true
      }
    ],
    "eqeqeq": "off", // 强制使用 === 和 !==  online已开启，h5选择性开启
    "no-duplicate-imports": "error", // 禁止重复模块导入
    "array-callback-return": "off",
    "max-params": [0, 20],
    "max-nested-callbacks": [0, 5],
    "no-console": "error", //disable console print.
    "no-useless-escape": "off",
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
    "react/jsx-no-undef": [
      "error",
      {
        "allowGlobals": true
      }
    ],
    "react/display-name": "off",
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "tabWidth": 4,
        "semi": true,
        "singleQuote": true,
        "jsxBracketSameLine": true,
        "printWidth": 100
      }
    ]
  },
  "globals": {
    "React": true,
    "$http": true,
    "Component": true,
    "$request": true,
    "$bffRequest": true,
    "$ajax": true,
    "$popMask": true,
    "$soa": true,
    "$confirm": true,
    "jsdom": true,
    "Enzyme": true,
    "test": true,
    "expect": true,
    "describe": true,
    "google": true,
    "mapboxgl": true
  }
}

{
  "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "prettier.printWidth": 120,
  "prettier.tabWidth": 2, 
  "prettier.useTabs": false, 
  "prettier.semi": true, 
  "prettier.singleQuote": true,
  "prettier.proseWrap": "preserve", 
  "prettier.arrowParens": "avoid", 
  "prettier.bracketSpacing": true, 
  "prettier.disableLanguages": ["vue"], 
  "prettier.endOfLine": "auto", 
  "prettier.eslintIntegration": false, 
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.ignorePath": ".prettierignore", 
  "prettier.jsxBracketSameLine": false, 
  "prettier.jsxSingleQuote": false, 
  "prettier.parser": "babylon", 
  "prettier.requireConfig": false, 
  "prettier.stylelintIntegration": false, 
  "prettier.trailingComma": "es5", 
  "prettier.tslintIntegration": false 
}

3.vscode安装插件ESLint、Prettier-Code formatter

4.settings.json配置

在vscode首选项-设置中搜settings.json，文件中加入以下配置：

  "editor.formatOnType": true,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "eslint.enable": true, // 开启eslint检查
  "editor.codeActionsOnSave": {
    // 使用eslint来fix，包括格式化会自动fix和代码质量检查会给出错误提示
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.experimental.useFlatConfig": true