create-react-app-typescript使用eslint和prettier实现自动格式代码

设置vsCode

安装插件：ESList和Prettier-Code formatter
修改settings.json:

"editor.formatOnSave": true,
"eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
],
"files.associations": {
    "*.js": "javascriptreact"
},

安装依赖

eslint

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react --dev

prettier

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

修改配置

新建.eslintrc.js并在package.json里面删除eslintConfig

module.exports =  {
  parser:  '@typescript-eslint/parser',  // 指定ESLint解析器
  extends:  [
    'plugin:react/recommended',  // 使用来自 @eslint-plugin-react 的推荐规则
    'plugin:@typescript-eslint/recommended',  // 使用来自@typescript-eslint/eslint-plugin的推荐规则
    'prettier/@typescript-eslint',  // 使用 ESLint -config-prettier 禁用来自@typescript-eslint/ ESLint 与 prettier 冲突的 ESLint 规则
    'plugin:prettier/recommended',  
  ],
  parserOptions:  {
  ecmaVersion:  2018,  // 允许解析最新的 ECMAScript 特性
  sourceType:  'module',  // 允许使用 import
  ecmaFeatures:  {
    jsx:  true,  // 允许对JSX进行解析
  },
  },
  rules:  {
    // 自定义规则
    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
  },
  settings:  {
    react:  {
      version:  'detect',  // 告诉 eslint-plugin-react 自动检测 React 的版本
    },
  },
};

新建.prettierrc.js并添加

{
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
  tabWidth: 4,
}

这样配置完后，如果保存还是不能格式化，可能是vscode的默认formatter不是prettier。这时候可以按CTRL + SHIFT + P,输入format然后选择Format Document，点击弹出框的按钮configure,然后选择pretter.

添加格式化命令

在packgage.json里面添加script标签

"scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "format": "prettier --write \"**/*.+(js|jsx|json|css|md)\""
  },

添加commit命令

添加在commit之前自动化格式代码, 这样会在commit的时候速度比较慢，但是有利于保证代码仓库的质量。
添加依赖

yarn add --dev lint-staged husky

修改package.json

  "lint-staged": {
    "*.+(js|jsx)": [
      "eslint --fix",
      "git add"
    ],
    "*.+(json|css|md)": [
      "prettier --write",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

只使用eslint进行格式化

如果我们选择只使用eslnit,需要先disable这个插件Prettier-Code formatter，然后在settings.json里面加入

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

参考链接：https://www.digitalocean.com/...
https://cloud.tencent.com/dev...