VSCode: ESLint + Prettier code syntax checking and formatting

Let me introduce how to use eslint + prettier to check the code syntax in vscode. At present, our project is mainly based on tsx, and the following configuration instructions will also be based on tsx.

It’s very simple. The two plug-ins look like this.

If it’s just code format and syntax checking: just write the relevant configuration in the vscode Setting file~

{
    
    
  "editor.formatOnSave": true, // 值设置为true时，每次保存的时候自动格式化；值设置为false时，按Command+Shift+F 格式化代码
  "editor.defaultFormatter": "esbenp.prettier-vscode", //默认格式化规则（可以按语言配置）
   "editor.detectIndentation": false, //vscode默认 启用时根据文件类型自动设置tabsize的选项，设置为false
  "editor.tabSize": 2, //tab的缩进为2
  // 添加ts语法验证支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  // vscode 中附带了ts的最新稳定版本，也可以通过该配置项 配置要使用的ts
  "typescript.tsdk": "node_modules/typescript/lib",
  // 每次保存的时候将代码按eslint进行修复 
  "editor.codeActionsOnSave": {
    
    
    "source.fixAll.eslint": true
    // 此处还可配置tslint stylelint，如下：
    //"source.fixAll.tslint": true,
   // "source.fixAll.stylelint": true
  },
}

Reference article:
Eslint
Prettier