摘要：它的目标是提供一个插件化的代码检测工具。，有了全局的和当前项目根目录下的规则配置文件，我们开始装插件并测试功能吧代码检查这个功能需要的插件为和。但是它本身并没有代码检查的功能，需要借助这样的特定语言检查支持。
前言
第一次运行 Vue 项目时被浏览器中满屏的 ESLint 报错给吓到了，果断禁用了该功能！
再之后找了个时间认真的了解了一下 ESLint，终于有了一些概念。简单来说，ESLint 就是一个整合了编码规范和检测功能的工具。以前说的那些规范（html，css，js 等规范）都是让你自己主动去学习，去遵守，现在 ESLint 帮助你检测你的代码是否符合你自己设定好的规范。
官网上的说明：
ESLint 最初是由 Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的 javascript 代码检测工具。
关于 ESLint 的入门学习大家可以查看这篇文章：利用ESLint检查代码质量，写得挺易懂的~
ESLint 使用使用 ESLint 的方式有很多种，参考该 页面，有编辑器，构建工具，命令行，源代码管理等。我个人目前的阶段适合直接使用编辑器来实时检测代码并提示错误，如果使用 webpack 的话，需要保存修改后才会提示，还有其他种种不便（可能是因为我笨吧）。
ESLint 安装和配置一个项目中想要使用 ESLint，首先需要安装 ESLint。全局安装的话就不用每个项目独立安装了：
npm install eslint -g
如果你首次使用 ESLint，那么你需要先设置一个配置文件，你可以在项目根目录下使用 --init 选项来生成：
eslint --init
But, 如果你真的是初次使用的话，肯定对 ESLint 的一切配置都一头雾水，这里有一份某大牛使用的 ESLint 配置：.eslintrc.js，原项目的该文件将注释删去了，我给的是我之前将项目 fork 过来的文件地址，有注释，如果看不懂注释，就直接 中文官网 上查。
Ok，有了 全局的 ESLint 和 当前项目根目录下的规则配置文件，我们开始装插件并测试功能吧！
代码检查这个功能需要的插件为 SublimeLinter 和 SublimeLinter-contrib-eslint。
SublimeLinter 是一个代码检查框架插件，功能非常强大，支持各种语言的检查。但是它本身并没有代码检查的功能，需要借助 ESLint 这样的特定语言检查支持。我们只需要使用对应的 SublimeLinter-contrib-eslint 插件即可。（参考文章：Sublime Text 3 配置 ESLint 代码检查）
装完这两个插件后，就可以右键 SublimeLinter > Lint this view 检查当前打开的 JS 文件了，不过我设置了（右键） SublimeLinter > Lint Mode > Background，让插件在后台自动执行代码检查功能，因此当前项目所有打开的 JS 文件都冒出了各种红框框、红点点……把光标置于错误处会在编辑器底部看到相应的错误信息。
那如何让代码检查在 .vue 文件中也生效呢？在前面给出的 .eslintrc.js 中，有以下这段代码：
// 使用非默认的 babel-eslint 作为代码解析器
// 这样 eslint 就能识别 babel 语法的代码
parser: "babel-eslint",
// required to lint *.vue files
// 用于检查 *.vue 文件的代码
plugins: [
"html"
]
需要安装插件才能使其检查 .vue 文件的代码，你需要全局安装 eslint-plugin-html（就是上面代码中的 "html" 插件） 和 babel-eslint（用于识别 babel 语法的代码）：
npm install eslint-plugin-html -g npm install babel-eslint -g
babel-eslint
Why Use babel-eslint?
You only need to use babel-eslint if you are using types (Flow) or experimental features not supported in ESLint itself yet. Otherwise try the default parser (you don"t have to use it just because you are using Babel).
乍一看上面的说明，也许我们并不需要 babel-eslint 插件的，但是我也不懂，所以就不管了~
到此暂告一段落，有了代码的实时检查功能，你可以随时修改代码并看到反馈，有些报错代码的写法是你刻意为之的，不影响代码运行，你也可以就放在那里不管它，反正又不影响项目的运行（如果集成到构建工具中使用，说不定就影响了哦~）。
自动修复ESLint 命令行的 --fix 选项用来自动修复规则所报告的问题（目前，大部分是对空白的修复），规则名前面有扳手图标的说明该问题可被自动修复。（具体请查看 Rules 页面）
我测试使用了两个 Sublime 插件：ESLintAutoFix 和 ESLint-Formatter。
第一个插件 ESLintAutoFix 我用了之后，总是会报错 [WinError 2] 系统找不到指定的文件，修改了配置项也没反应，多次尝试后我放弃了。
第二个插件 ESLint-Formatter 在 js 文件上使用是 ok 的，右键 ESLint Formatter > Format This File 或者直接使用快捷键 ctrl+shift+h。如果快捷键冲突了，可以在菜单栏找到 Preferences > Package Settings > ESLint Formatter > Key Binding - User，打开 Key Binding - User 文件，新增快捷键绑定，代码如下：
{
"keys": ["ctrl+alt+h"],
"command": "format_eslint"
}
vue 文件自动修复
但是，如果在 .vue 文件上使用 ESLint-Formatter 插件，就会出现问题，页面上会出现重复的 template 部分（反正我使用的话会有问题，都查不到解决方案……）。
由于我最近主要使用 Vue 进行开发，因此这个问题必须解决（当你发现页面上的红点点超过你的承受能力范围的时候，是非常需要一键自动修复功能的~）！
考虑过使用 webpack 来修复的，就是文件保存修改后自动修复，但是官网上看到：
我就打消念头了~
经过我百般折腾和搜索，发现了这个 Fix the code using --fix，并得到了一个解决方案：
菜单栏找到 Tools > Build System > New Build System，新建一个 eslint-fix.sublime-build 文件，文件名随便起都可以的，然后里面内容如下：
{
"shell_cmd": "eslint --fix $file"
}
或者
{
"cmd": "D:dev
vm
pmeslint.cmd --fix $file"
}
（确保全局安装 eslint）如果你想要修复的文件可以通过命令行工具运行命令 eslint --fix 成功自动修复的话，我这个方法就能成功。
使用方式为：选择菜单栏 Tools > Build System > eslint-fix 或者 使用快捷键 ctrl+b 运行刚刚创建的 build 文件。（当然选择快捷键方式~）运行成功会将信息显示在面板（Panel）上，如下图所示：
总结如果你有过这种疑问：通过一个快捷键对编辑器当前打开文件执行一句命令，如何实现？答案就是，按照上面的例子就可以实现！
在编辑器里实时检查代码可以给你最直接的代码编写反馈，看到哪里标红了就会想说犯了什么错误，错误改正多了编码习惯也就会慢慢变好了（同时也能避免你犯一些很傻逼的错误）~
反正代码检查工具还是很实用的，可以的话就从今天开始用起来吧！
Sublime Text 3 配置 ESLint 代码检查
Sublime Text 中配置 ESLint
ESLint in Vue
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/88953.html
摘要：但是它本身并没有代码检查的功能，需要借助这样的特定语言检查支持。配置完成如果你安装的没有错误的话，那么大概就是这个样子的编辑器会有一个高亮的提示您符不符合的代码风格。 准备工作： sublime text3 编辑器 sublime text3安装走起 node环境得支持 node安装走起 ESlint规范 ESlint配置详细说明 开始安装 以上都安装完毕的时候，那么进行安装...
摘要：一前言本文主要针对编辑器是的项目进行代码规范。因此对进行语法检查的工具应运而生，目前使用最为广泛。这篇将讲解如何将集成到我们的项目中。七总结在项目上使用实际上还算相对简单的，但是对于什么都是半生半熟的知识技能的人来说还是花了点时间。 一、前言 本文主要针对编辑器是sublime的vue项目进行eslint代码规范。 Javascript 是一门弱类型语言，所以语法检查变得尤为重要。虽然...
摘要：安装全局安装全局安装插件在需要用到的项目生成文件在编辑器上安装插件菜单栏找到，新建一个文件，然后里面内容如下或者用快捷键运行刚刚创建的文件 1.安装全局安装eslint npm install eslint -g 全局安装eslint插件 npm install eslint-plugin-html -g npm install babel-eslint -g 在需要用到eslint的...
摘要：是一种用于识别代码格式错误的工具，目的是使代码更加规范和一致并避免错误。但是它本身并没有代码检查的功能，需要借助这样的特定语言检查支持。安装以后修改配置文件。 问题描述 使用vue-cli来构建Vuejs应用的项目中默认安装了eslint-loader模块，eslint-loader模块是目前相对比较流行的代码检测工具，可以检测书写的代码是否符合统一规范，可以在一些比较大型的项目开发中...
摘要：如果想配置开发工具面向前端及开发人员的配置如果想配置开发工具配置及使用技巧所谓网红编辑器，我觉得比来的更爽，因为的所有操作和插件，对于来说也就是一个插件就能无缝兼容。作为一个前端开发，开箱即用的代码编辑高亮提示都十分友好。 如果想配置 sublime 开发工具 => 面向web前端及node开发人员的vim配置 如果想配置 vim 开发工具 => sublime配置及使用技巧 所谓网红...
阅读 2631·2021-10-13 09:48
阅读 3410·2021-10-13 09:39
阅读 3347·2021-09-22 16:04
阅读 1569·2021-09-03 10:48
阅读 669·2021-08-03 14:04
阅读 2227·2019-08-29 15:18
阅读 3268·2019-08-26 12:19
阅读 2735·2019-08-26 12:08
