VSCode常⽤插件之ESLint使⽤
更多VSCode插件使⽤请访问：
ESLint这是VS Code ESLint扩展，将ESLint JavaScript集成到VS Code中。
⾸先简单说⼀下使⽤流程：
1.安装ESLlint库(在项⽬本地或全局安装，看具体项⽬需要)
2.创建.eslintrc配置⽂件(⼿动创建或者复制其它已有配置⽂件均可，看具体项⽬需求)
3.根据⽂档设置完，保存⽂件时即可进⾏eslint修复(MacOS：快捷键是 command + s )
安装
该扩展使⽤安装在打开的⼯作区⽂件夹中的ESLint库。如果该⽂件夹不提供扩展名，则扩展名将查全局安装版本。如果您尚未在本地或全局安装ESLint，请npm install eslint在⼯作空间⽂件夹中运⾏以进⾏本地安装或npm install -g eslint全局安装。
创建配置⽂件
在新⽂件夹上，您可能还需要创建⼀个.eslintrc配置⽂件。您可以通过使⽤VS Code命令Create ESLint configuration或eslint在终端中运⾏该命令来执⾏此操作。如果您已全局安装了ESLint（请参阅上⽂），请eslint --init在终端中运⾏。如果您在本地安装了ESLint，则可以.\node_modules\.bin\eslint --init在Windows以
及./node_modules/.bin/eslint --initLinux和Mac下运⾏。
编辑器设置
able：启⽤/禁⽤ESLint。默认情况下启⽤。
2.eslint.debug：启⽤ESLint的调试模式（与--debug命令⾏选项相同）。请参阅ESLint输出通道以获取调试输出。此选项对于跟踪ESLint的配置和安装问题⾮常有⽤，因为它提供了有关ESLint如何验证⽂件的详细信息。
3.able：扩展是否为整个⼯作区⽂件夹提供lint任务。
{
"eslint.lintTask.options": "-c C:/mydirectory/.eslintrc.json --ignore-path C:/mydirectory/.eslintignore ."
}
5.eslint.packageManager：控制⽤于解析ESLint库的包管理器。这只有在全局解析ESLint库时才有影响。有效值为"npm"or "yarn"或"pnpm"。
6.eslint.options：⽤于配置如何使⽤启动ESLint的选项。默认为空选项包。指向⾃定义.eslintrc.json⽂件的⽰例如下：
{
"eslint.options": { "configFile": "C:/mydirectory/.eslintrc.json" }
}
7.eslint.run: 运⾏linter 的时间，onSave(保存后)或onType(输⼊时)，默认为onType。
8.eslint.quiet: 忽略警告。
9.eslint.runtime: 使⽤此设置设置要在其下运⾏ESLint的节点运⾏时的路径。
dePath: 如果⽆法检测到已安装的ESLint包，请使⽤此设置，例如/myGlobalNodePackages/
node_modules
11.eslint.probe：应激活ESLint扩展名并尝试验证⽂件的语⾔标识符数组。如果对探测语⾔的验证失败，扩展将显⽰silent。默认为["javascript", "javascriptreact", "typescript", "typescriptreact", "html", "vue"]
12.eslint.validate: 指定要强制验证的⽂件的语⾔标识符数组。这是⼀个旧的遗留设置，在正常情况下应该不再需要。默认为["javascript", "javascriptreact"]
13.able: 启⽤ESLint作为已验证⽂件的格式化程序。尽管您也可以使⽤设置editor.formatOnSave在保存时使⽤格式化程序，但建议使
⽤deActionsOnSave功能，因为它允许更好的可配置性。
14.eslint.workingDirectories: 指定如何计算ESLint使⽤的⼯作⽬录。ESLint解析相对于⼯作⽬录的配置⽂件（例如eslintrc、.eslintignore），因此正确配置该⽂件⾮常重要。如果在终端中执⾏ESLint需要将终端中的⼯作⽬录更改为⼦⽂件夹，则通常需要调整此设置。（另请参见）。还请记住，.eslintrc*⽂件是在考虑⽗⽬录的情况下解析的，⽽.eslintignore⽂件只在当前⼯作⽬录中使⽤。可以使⽤以下值：
[{ "mode": "location" }] (@since 2.0.0): 指⽰ESLint使⽤⼯作区⽂件夹位置或⽂件位置（如果没有打开⼯作区⽂件夹）作为⼯作⽬录。这是默认策略，与ESLint扩展的旧版本（1.9.x版本）中使⽤的策略相同。
*[{ "mode": "auto" }] (@since 2.0.0): 指⽰ESLint根据package.json、.eslintignor e和.eslintrc*⽂件的位置推断⼯作⽬录。这可能在很多情况下有效，但也可能导致意想不到的结果。
string[] : 要使⽤的⼯作⽬录数组。请考虑以下⽬录布局：
root/
client/
.eslintrc.json
client.js
server/
.eslintignore
.eslintrc.json
server.js
然后使⽤设置：
"eslint.workingDirectories": [ "./client", "./server" ]
将使⽤服务器⽬录作为当前eslint⼯作⽬录来验证服务器⽬录中的⽂件。客户端⽬录中的⽂件也是如此。ESLint扩展还会将进程的⼯作⽬录更改为提供的⽬录。如果这不是要
⼀个⽂字与！可以使⽤!cwd属性（例如{ "directory: "./client", "!cwd": true }））。这将使⽤客户端⽬录作为ESLint⼯作⽬录，但不会更改进程的⼯作⽬录。
{ "pattern": glob pattern }(@since 2.0.0)：允许指定检测⼯作⽬录的模式。这基本上是列出每个⽬录的捷径。如果您有⼀个Mono存储库，并且所有项⽬都位于packages⽂件夹下，那么可以使⽤{ "pattern": "./packages/*/" }使所有这些⽂件夹都在⽬录下⼯作。
deAction.disableRuleComment: 具有属性的对象：
enable : 在快速修复菜单中显⽰禁⽤lint规则。默认情况下为true。
location : 选择在separateLine或sameLine上添加eslint disable注释。默认为separateLine 。例⼦：
{ "enable": true, "location": "sameLine" }
deAction.showDocumentation: 具有属性的对象：
enable : 在“快速修复”菜单中显⽰“打开lint规则⽂档”⽹页。默认情况下为true。
de (@since 2.0.12): 控制在保存时运⾏代码操作时修复哪些问题
html文件格式化all : 通过重新验证⽂件内容修复所有可能的问题。这将执⾏与在终端中使⽤--fix选项运⾏eslint相同的代码路径，因此可能需要⼀些时间。这是默认值。
problems : 仅修复当前已知的可修复问题，只要它们的⽂本编辑不重叠即可。此模式要快得多，但很可能只能解决部分问题。
18.able（@since 2.0.0起）：使⽤ESlint作为由ESlint验证的⽂件的格式化程序。如果启⽤，请确保禁⽤其他格式化程序（如果要将其设为默认值）。⼀个好的⽅法是为javascript添加以下设置"[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }。对于TypeScript，您需要添加"[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }。
IgnoredFiles（@since 2.0.10）:⽤于控制在尝试清除被忽略的⽂件时是否应⽣成警告。默认值为off。可以设置为warn。
deActionsOnSave（@since 2.0.0起）：此设置现在⽀持条⽬source.fixAll.eslint。如果设置为true，则来⾃所有插件的所有可⾃动修复的ESLint错误都将在保存时修复。您还可以使⽤VS Code的
语⾔范围设置来有选择地启⽤和禁⽤特定语⾔。要禁⽤codeActionsOnSaveHTML⽂件，请使⽤以下设置：
"[html]": {
"deActionsOnSave": {
"source.fixAll.eslint": false
}
}
旧eslint.autoFixOnSave设置现已弃⽤，可以安全地删除。另请注意，如果将ESLint⽤作默认格式化程序，则应在打开editor.formatOnSave时将其关
闭deActionsOnSave。否则，您的⽂件将被修复两次，这是不必要的。
设置迁移
如果旧eslint.autoFixOnSave选项设置为true，则ESLint会提⽰将其转换为新deActionsOnSave
格式。如果要避免迁移，可以通过以下⽅式在对话框中进⾏响应：
现在不⾏：下次打开⼯作区时，ESLint提⽰不会再次迁移设置
决不迁移设置：设置迁移将改变⽤户设置被禁⽤eslint.migration.2_x，以off
始终可以使⽤以下命令⼿动触发迁移ESLint: Migrate Settings
命令：
该扩展将以下命令添加到“命令”⾯板。
Create '.eslintrc.json' file：创建⼀个新.eslintrc.json⽂件。
Fix all auto-fixable problems：将ESLint⾃动修复解决⽅案应⽤于所有可修复的问题。
Disable ESLint for this Workspace：禁⽤此⼯作空间的ESLint扩展。
Enable ESLint for this Workspace：为此⼯作空间启⽤ESLint扩展。
在VS Code的任务运⾏中使⽤扩展
扩展名只在键⼊时对单个⽂件进⾏linting操作。如果要对整个⼯作区集eslint.able进⾏lint操作，则扩展还将贡献eslint: lint whole folder任务。不再需要
在tasks.json中定义⾃定义任务。
使⽤ESLint验证TypeScript⽂件
您可以在中到有关如何使⽤ESlint加载。在TypeScript设置中使⽤VS Code ESLint扩展之前，请熟悉介绍。尤其要确保可以使⽤eslint命令在终端中成功验证TypeScript⽂件。
此项⽬本⾝使⽤ESLint验证其TypeScript⽂件。所以它可以作为开始的蓝图。
为了避免来⾃任何TSLint安装的验证，请使⽤"able": false禁⽤TSLint。
Mono存储库设置
与JavaScript⼀样，在mono存储库中验证TypeScript需要告诉VS Code ESLint扩展当前的⼯作⽬录是什么。使⽤eslint.workingDirectories设置执⾏此操作。对于此存储库，⼯作⽬录设置如下所⽰：
"eslint.workingDirectories": [ "./client", "./server" ]
我的setting.json
{
//主题设置
"lorTheme": "Monokai",
// 默认编辑器字号
"editor.fontSize": 14,
//是否⾃动换⾏
"editor.wordWrap": "on",
// tab⼏个缩进
"editor.tabSize": 2,
// ⽂件⾃动保存
"files.autoSave": "afterDelay",
// ⾃动格式化粘贴的代码
"editor.formatOnPaste": true,
// 在资源管理器删除内容时候是否进⾏⽤户提醒
"firmDelete": false,
// 控制在资源管理器内拖放移动⽂件或⽂件夹时是否进⾏确认
"firmDragAndDrop": false,
// 在资源管理器拖拽⽂件是否进⾏⽤户提醒
"workbench.statusBar.visible": true,
// ⼯作区缩放级别
"Level": 0,
/
/ 重命名或移动⽂件时，启⽤或禁⽤⾃动更新导⼊路径
"abled": "always",
// 启⽤/禁⽤导航路径
"abled": true,
// 终端cmd字号
"terminal.integrated.fontSize": 16,
// 不检查缩进，保存后统⼀按设置项来设置
"editor.detectIndentation": false,
// 编辑器初始界⾯
"workbench.startupEditor": "newUntitledFile",
// ⼯作台状态栏是否可见
"workbench.statusBar.feedback.visible":false,
// 添加多个光标时候需要的快捷键
"editor.multiCursorModifier": "ctrlCmd",
// ⾃定义代码⽚段显⽰的位置
"editor.snippetSuggestions": "top",
"uBarVisibility": "toggle",
// 启⽤后，按下 TAB 键，将展开 Emmet 缩写。
"iggerExpansionOnTab": true,
// 控制编辑器在空⽩字符上显⽰符号的⽅式
"derWhitespace": "all",
// 控制编辑器是否应呈现空⽩字符
"derControlCharacters": false,
// 在⽂件和⽂件夹上显⽰错误和警告
"abled": false,
// html⽂件格式化程序
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features",
// 禁⽌eslint对html进⾏校验
"deActionsOnSave": {
"source.fixAll.eslint": false
}
},
/
/ "[javascript]": {
//    "editor.defaultFormatter": "pescript-language-features"    // },
// vscode-fileheader  -----settings begin-----
// ⽂件作者
"fileheader.Author": "JiaoShouf2e",
// ⽂件最后修改者
"fileheader.LastModifiedBy": "JiaoShouf2e",
// vscode-fileheader  -----settings end-----
//stylelint  -----settings begin-----
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"able": false,
//stylelint  -----settings end-----
// eslint  -----settings begin-----
// 是否为JavaScript⽂件开启eslint检测
"able": true,
// 保存之后进⾏lint
"eslint.run": "onSave",
// 是否启⽤eslint的调试模式
"eslint.debug": true,
// 保存⽂件时进⾏eslint修复(MacOS：快捷键是 command + s )，并不能修复所有问题，多数还是需要⼿动修复    "deActionsOnSave":{
"source.fixAll.eslint": true
}
// eslint  -----settings end-----
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。