vscode 中全局配置 eslint

在项目开发的时候，既想用 eslint 的代码规范，但是又不想在项目中配置（不希望项目启动后控制台输出规范的日志），于是想到了利用开发工具来对不规范的代码进行提示。而 vs code 正好可以通过添加拓展插件来实现这个需求，于是捣鼓了一下如何配置，在此记录一下。

首先需要全局安装一些插件

npm install xxx -g

插件	版本	用途
eslint	^7.12.1	核心插件
eslint-plugin-html	^6.1.0	html 文件拓展
eslint-plugin-vue	^7.1.0	vue 文件的拓展
eslint-config-airbnb-base	^14.2.0	流行的 eslint 配置，非必要
typescript	^7.12.1	需要
@typescript-eslint/parser	^7.12.1	ts 转换插件
@typescript-eslint/eslint-plugin	^7.12.1	eslist 的 ts 拓展

然后在 vs code 中安装 eslint 拓展

再在 vs code 中添加拓展插件的配置

在 vs code 里点击：文件 => 首选项 => 设置 => 拓展 => ESLint

在配置文件中添加以下内容

	"eslint.codeAction.showDocumentation": {
        "enable": true,         // 在快速修复菜单中显示打开的皮棉规则文档网页。true默认。
    },
    "eslint.options": {
    
	    // 全局配置文件位置
        "configFile": "C:/Users/zhuchenghong/AppData/Roaming/npm/node_modules/.eslintrc.js",    
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": false   // 自动修复错误
    },
    "eslint.lintTask.enable": true,
    
    // 插件加载目录，未指定时默认从当前项目目录下加载
    "eslint.nodePath": "C:/Users/zhuchenghong/AppData/Roaming/npm/node_modules",    

生成 eslint 的配置文件 .eslintrc.js

这里需要特别说明，全局配置的时候，eslint 需要的插件都是根据配置文件的位置去加载的，所以最好放在全局安装目录下

默认全局目录：C:/Users/zhuchenghong/AppData/Roaming/npm/node_modules

进入到该目录，先 npm init 创建 package.json 文件，因为 eslint 创建配置文件需要目录下有这个。然后执行 eslint --init 创建配置文件，按照提示回车就行了

基本步骤就是这样，关于 eslint 的规则，可以去看看 eslint 官网 的说明

如果安装不成功，可以在 vs code 的插件控制台查看错误日志，然后百度解决之