在新项目中安装并使用eslint

一、 在项目中安装eslint包

(1) 下载eslint包

我们在一个新项目中需要使用eslint的时候,我们需要先下载eslint的包

npm i eslint -D

(2)在根目录进行eslint的初始化配置

npx eslint --init

备注:
1. npx 是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用
2. 没有npx之前：

2.1. 全局安装npm i -g create-react-app 
2.2. 在通过脚手架的命令来创建 React 项目

3.有了npx之后 npx 调用最新的 create-react-app 直接创建 React 项目

这是我自己的配置,大家可以针对自己的情况进行不同的配置

在这个配置的最后会有一个询问是否安装一些其他的包,大家直接选yes就可以了

等待最后的安装完成

有些可能会安装失败,出现这个错误

出现这个错误,是你配置的时候有错误,再次执行一次就好了

二、配置eslint的自动保存修复错误

咱们开启eslint后,eslint会开启你的代码检测,判断你的代码有没有语法错误

上面就是你的语法有错误时的报错

我们去一个一个进行手动的修正的太过于消耗时间,所以我们可以进行保存自动修复 只需要配置如下代码就好了
我们先找到设置

 

 然后进入工作区设置中

将下面这段代码填入就可以了

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

下载这个插件使用就可以了 

 

这样我们进行保存就可以自动修复eslint的报错了

这个配置可以修复大部分的报错 例如空格问题 代码的单双引号问题等

但一些代码的错误是不可以进行修复的 需要进行手动的修复