项目中 eslint 简单使用

项目中使用 eslint 对应的 官方文档

eslint 初始化

npx eslint --init

开始安装，一路回车

第一步，你想如何使用 ESLint，默认是 To check syntax and find problems

How would you like to use ESLint? ...
// 你想如何使用ESLint?
  To check syntax only
  // 只检查语法
> To check syntax and find problems
  // 检查语法并查找问题
  To check syntax, find problems, and enforce code style
  // 检查语法，发现问题，并强制代码样式

第二步，你的项目使用什么类型的模块，默认是 JavaScript modules

What type of modules does your project use? ... 
// 你的项目使用什么类型的模块?
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

第三步，你的项目使用哪个框架，默认是 React

Which framework does your project use? ...       
// 你的项目使用哪个框架
> React
  Vue.js
  None of these

第四步，你的项目使用 TypeScript，默认是 No

Does your project use TypeScript? » No / Yes

第五步，你的代码在哪里运行，默认是 Browser

Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
  Node

第六步,你希望你的配置文件是什么格式的，默认是 JavaScript

 What format do you want your config file to be in? ... 
> JavaScript
  YAML
  JSON

这一步结束，就是安装对应的 eslint 和 react 对应的插件最新的

eslint-plugin-react@latest eslint@latest

生成的 .eslintrc.js 配置文件

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        // 上面选择 vue 这里对应的是 "plugin:vue/vue3-essential"
        "plugin:react/recommended"
        // 上面选择 typescript  是 yes 这里多一个 "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
    ],
    // 上面选择 typescript  是 yes 这里解析器多一个 parser: "@typescript-eslint/parser"
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        // 上面选择 vue 这里对应的是 vue 
        "react"
        // 上面选择 typescript  是 yes 这里插件多一个 @typescript-eslint
    ],
    "rules": {
    }
}

创建忽略文件 .eslintignore

node_modules/
dist/

修改 package.json

添加 lint-fix 命令，修复 src 文件夹下的 .js,.jsx,ts,tsx 后缀的文件使用问题

{
  ...
  "scripts": {
    ...
    "lint-fix": "eslint --ext .js,.jsx,ts,tsx --ignore-path .gitignore --fix src"
  }
  ...
}