老项目中如何使用eslint

1.下载依赖包

npm i eslint -D

2.按交互提示安装相关插件

npx eslint --init

具体配置如下图

 2-1.检查语法，发现问题并执行代码风格

 2-2  这些都不是

2-3  使用那个框架

2-4 使用typescript

配置前需要先下载typescript

 2-5  浏览器、node中运行代码 

2-6  流行代码风格 

2-8  Standard风格指南

 2-9 js格式 

2-10 npm立即运行

3.工作区中配置

{
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [".js", ".vue", ".jsx", ".tsx"]
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

4.-环境配置-引入prettier-now

4.1安装vscode插件prettier-now

4-2工作区vscode/setting.js更新配置代码

{

    
  "eslint.run": "onType",
  "eslint.options": {
    "extensions": [".js", ".vue", ".jsx", ".tsx"]
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // 编辑器设置 - 保存时做格式化
  "editor.formatOnSave": true,
  // 编辑器设置 - 默认采用prettier-now做格式化
  // 如果使用的是prettier，这的设置应该是 esbenp.prettier-vscode
  "editor.defaultFormatter":"remimarsal.prettier-now",

  // 控制缩进
  "prettier.useTabs": false, // 缩进不使用tab，使用空格 
  "prettier.tabWidth": 2, // 缩进字节数
  
  // 函数声明时小括号前后要加空格
  // 如果你使用prettier这一项是不能做选择的，导致和eslint默认配置的冲突
  // 可以在百度中搜到很多的记录： https://www.baidu.com/s?wd=prettier%20%E5%87%BD%E6%95%B0%E7%A9%BA%E6%A0%BC
  "prettier.spaceBeforeFunctionParen": true,

  // react的jsx让>与结束标签同行
  "prettier.jsxBracketSameLine": true,
  "prettier.bracketSpacing": false, // 去掉数组内部前后的空格
  "prettier.semi": false, // 不要给语句加;
  "prettier.singleQuote": true, // 采用单引号
  "prettier.trailingComma": "none", // 不要尾随逗号,
  "prettier.printWidth": 80, // 每行超过80列就换行

  // 在.js中，写div按下tab就可以自动补全，而不需要写<div再补全
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  

}

5. .eslintrc.js配置

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ['plugin:react/recommended', 'standard'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12
  },
  plugins: ['react', '@typescript-eslint', 'react-hooks'],
  rules: {
    'react/react-in-jsx-scope': 'off',
    'react-hooks/rules-of-hooks': 'error',
    // 检查依赖项的声明
    'react-hooks/exhaustive-deps': 'warn',
    'no-use-before-define': 'off'
  }
}

 6.prettier配置项 详细说明

{
  "printWidth": 100, // 超过最大值换行 
    "overrides": [
        {
            "files": ".prettierrc",
            "options": { "parser": "json" }
        }
    ],
  "tabWidth": 4, // 缩进字节数 
  "useTabs": false, // 缩进不使用tab，使用空格 
  "semi": true, // 句尾添加分号 
  "singleQuote": true, // 使用单引号代替双引号 
  "proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行 
  "arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 
  "bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }" 
  "disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置 
  "endOfLine": "auto", // 结尾是 \n \r \n\r auto
  "eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验 
  "htmlWhitespaceSensitivity": "ignore",
  "ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中  
  "jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
  "jsxSingleQuote": false, // 在jsx中使用单引号代替双引号  "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
  "requireConfig": false, // Require a 'prettierconfig' to format prettier  
  "stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验  
  "trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
  "prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
}