Vscode如何配置属于自己的ESlint

众所周知，Vscode有一个插件叫ESLint，是用来提示错误信息的，但是他只能用来提示错误，无法自动修改格式——

本文将带你了解ESlint的配置方法，让你的vscode由你自己掌控！

Vscode掌控法则：

第一步：下载并配置ESlint使其能在保存时修正格式

第二步：安装prettier.now并适配ESlint

1. 安装ESlint,当然要先安装插件,插件名ESlint

2.运行npm i eslint typescript -D下载相关第三方包

3在项目根目录运行npx eslint --init

此时会出现一系列配置需要你选择

第一个问题是询问你将用eslint做什么,这里我们选第三个

 第二个问题是询问你的项目使用哪种类型的模块,这里我们选第三个,因为我们两种都要使用

 第三个问题是你要将eslint运用到哪种框架上,这里我们选择第一个

 第四个问题是询问我们需不需要使用ts,这里选择'是'

 第五个问题是询问我们将在哪种环境运用eslint,这里我们用空格将两种都选上

 第六个问题是询问我们想使用哪种格式修正方法,这里我们选第一个

 第七个问题是询问我们想用哪种最流行的方法,这里我们选第二个

 第八个问题是我们像让eslint以哪种语言出现在你的根目录中,这里我们选择第一个

 最后他会向我们确认是否以上述答案来生成eslint,我们选yes

 这样就会生成一个.eslintrc.js文件在我们的根目录下

这样我们就可以自定义配置我们的eslint了

eslintc.js

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: ['plugin:react/recommended', 'standard'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 13
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {}
}

这样我们就能在按下ctrl+s时自动修改格式了

如果你想让eslint再做一些更人性化的操作可以再rules内自定义规则...

但是这只是一部分,因为vscode自动格式化有可能干扰我们的eslint,所以我们要改变配置自动格式化

4.安装prettier.now插件

 5.开始配置vscode

点击设置

 在输入框搜索eslint,将第一个复选框勾上再点击工作区将复选框也勾上

 这是根目录会出现一个.vscode文件夹,并且目录下有一个settings.json文件

settings.json

{
  "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"
  },
  "[javascript]": {
    "editor.defaultFormatter": "remimarsal.prettier-now"
  },
  "eslint.alwaysShowStatus": true,
  "[javascriptreact]": {
    "editor.defaultFormatter": "remimarsal.prettier-now"
  }
}

最后再将默认格式化工具切换到prettier.now

 恭喜你你已经拥有了一个属于自己的eslint配置,并且你可以随时改变它!

好,这就是配置eslint的全过程了,喜欢还请收藏哦~