vscode使用eslint

说明

eslint是用来检验js代码的一套规则机制，可以帮助我们规范代码风格。
参考官网:https://github.com/eslint/eslint/
https://eslint.bootcss.com/docs/user-guide/configuring（中文的）

在线使用

采坑步骤

1 安装node（此处略过，自行百度）

2 安装eslint

• 本地局部安装 $ npm install eslint --save-dev
• 本地全局安装 $ npm install eslint -g
  
  注意：这里如果是自己使用的话，建议全局安装，如果是工作使用，建议局部安装，好携带和转移，安装完后，如图所示。

3 初始化

$ ./node_modules/.bin/eslint --init  初始化eslint
$ ./node_modules/.bin/eslint myfile.js 校验文件

注意：我们直接在vscode里进入到.bin文件夹去调用命令的话，一般来说是会报错的

这里解决方法就比较多了，可以自行百度，我这里直接用git-bash窗口去调用，就是需要安装git。还有其他方法自行百度

这里我把我选择的一些选项截图保存一下：








这里是因为我没有npm init 初始化出来pack.json。当然，你也可以自己手动建一个。
建立完毕后，在走一遍，会多出几个选项，截图保存：

我这里选择的爱彼迎的风格。因为爱彼迎风格相对来说，受众比较广泛。

然后就是我这里报错了，各种权限问题。应该是文件夹权限没有，估计是没有用管理员权限去运行。不过好在，该有的东西都有了，我们先大体看一下。

这就是我们的配置文件。配置项就先不细说了。我们现在用一下。然后发现找不到eslint.js，这是其中一个坑。踩得第一个坑哈，记录下，没办法，我这边使用cmd命令窗口去重新安装，不用powershell和git了
在连续踩了几个坑之后啊，我整理了一套比较标准的操作，除非是你网络问题，要不基本都会成功。

标准步骤

这里我就不截图了，直接上代码，不过前提我还是把需要注意的几点说明下。
1 我使用的工具是vscode，从vscode里直接打开的终端是powershell形式
2 尽量采用本地局部安装，方便后面的移动
3 为了避免路径和权限问题，建议使用npx（可以自行百度下npx是干嘛的）
具体步骤：

$ npm install eslint --save-dev  //本地局部安装eslint
$ npm init  //初始化pack.json，因为eslint有些信息需要写入
$ npx eslint --init //初始化eslint
$ npx eslint test.js

下面是校验的截图，这样就成功了。

那么现在就有几个问题摆在我的面前：
1 我办公的地方没网，是离线环境，我如何使用eslint
2 eslint的规则很多，我要怎么学呢？
3 我不可能每次写完一个js就去npx eslint xxx.js吧，我想一边写，一边校验，一边修复怎么办？

OK，针对以上问题
我们一个一个来解答。
首先，我们回答3：
既然我们发现了问题，那么，我们如何修复呢？其实修复蛮简单啊，自带的提示也有

$ npx eslint --help 帮助命令
$ npx eslint test.js --fix //这个就是根据规则修复test.js文件，但是
这里需要注意点啊，就是不是说什么规则都能修复，比如，不允许出现console.log，就没办法帮你注释掉，像什么加个分号啊，是可以的

那么我们在看一下，如何一边写代码，一边修复检查呢？
这里就需要提到我们的vscode的插件

当然了，这里我强烈建议在安装一款插件，就是eslint的中文提示，因为eslint都是英文配置的，安装了中文好理解。

然后在setting.json里加入以下配置就行了：

{
    "liveServer.settings.donotShowInfoMsg": true,
    "javascript.validate.enable": false,
    "files.autoSave": "afterDelay",
    //配置的eslint
    "editor.formatOnType": true,
    "editor.formatOnSave": true,
    "eslint.codeAction.showDocumentation": {
        "enable": true
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    },
    "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
 
}

这样我们编写完了，直接ctrl+s就可以保存，并修复了。
那至于第一个问题，就是离线环境的部署，要怎么搞。其实也很简单，我们下载个zip免安装的vscode，把插件直接打包就行了。然后局部安装的node_module直接拿来用。至于eslint的规则。那就只能查看网友们的答案和官网了。