eslint vscode 自动修复

0. 创建.eslintrc.js文件 0.1 能够选择本身手动创建 在根目录创建文件.eslintrc.js

const pkg = require('./package.json');

module.exports = {
  env: {
    browser: true,
    amd: true,
    es6: true,
    node: true
  },
  extends: ['airbnb'],
  plugins: ['react', 'react-hooks'],
  parser: 'babel-eslint'
};
复制代码

0.2 使用ESLint自动建立规则

npm init
eslint --init
eslint --init
How would you like to use ESLint? To check syntax, find problems, and enforce code style
What type of modules does your project use? JavaScript modules (import/export)
Which framework does your project use? None of these
Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Browser
How would you like to define a style for your project? Use a popular style guide
Which style guide do you want to follow? Standard (https://github.com/standard/standard)
What format do you want your config file to be in? JavaScript
复制代码

配置以上规则。

1. 安装npm包

针对vue

npm install --save-dev eslint-friendly-formatter eslint-loader eslint-plugin-html eslint-plugin-vue eslint-plugin-react eslint-config-standard
复制代码

针对react airbnb

npm install --save-dev eslint-friendly-formatter eslint-loader eslint-plugin-html eslint-plugin-react eslint-config-airbnb  eslint-plugin-react-hooks
复制代码

2. 打开 vscode 修改配置文件

{
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",  //  用eslint的规则检测js文件
        {
          "language": "vue",   // 检测vue文件
          "autoFix": true   //  为vue文件开启保存自动修复的功能
        },
        {
          "language": "react", 
          "autoFix": true
        },
        {
          "language": "html",
          "autoFix": true
        },
      ],
    "files.associations": {
        "*.cjson": "jsonc",
        "*.wxss": "css",
        "*.wxs": "javascript"
    },
    "emmet.includeLanguages": {
        "wxml": "html"
    }
}
复制代码

重启VSCode使之生效。