应用
一、手动应用
当我们想对某个文件进行检查时,只需要在当前目录打开命令行窗口,输入以下命令,就可以对某个文件或某个目录下的所有文件进行检查。如果执行完命令后什么也没有输出,就说明我们的代码已经通过ESLint
检查,可以放心提交代码。
1.1 检查
eslint src/APP.vue // 检查指定的文件
eslint src/*.vue // 检查src目录下的所有文件
1.2 修复
执行以下的ESLint
自动修复命令,对一些错误进行自动修复。不过,这个命令只能自动修复一些代码格式上的错误(比如ESLint
的配置要求需要使用双引号,但是写代码时采用了单引号而报错),对于一些语法错误,就需要我们手动去修复。
eslint src/APP.vue --fix // 检查指定的文件,并且自动修复错误
eslint src/*.vue --fix // 检查src目录下的所有文件,并且自动修复错误
二、自动应用
配置好ESLint
和Prettier
之后,我们通过运行eslint
命令,就可以对我们代码进行 检查啦。但是,每次要手动运行命令才能检查我们的代码还是有点麻烦,有没有更简单的方式,让我们在编写代码的过程中,只要保存文件就能够对当前文件进行检查,并且自动修复一些错误呢?接下来,接下来,VSCode
插件就登场啦~
2.1 安装 VsCode 插件
安装Eslint
插件
首先,我们需要安装的ESLint
插件,安装方法很简单,在VSCode
的EXTENSIONS
中找到ESLint
插件,然后点击install
就可以啦。
安装Prettier
插件
接着,我们还需要安装Prettier
插件。
安装EditorConfig for VS Code
插件
最后,我们也把EditorConfig for VS Code
插件安装上,这个插件可以让编译器读取配置文件,并且按照配置文件里面的规定来格式化代码,有了这个插件,只要定义好一份配置文件,就算团队成员用的编译器不同,也能够输出风格统一的代码。
2.2 配置 VsCode setting.json
安装好插件之后,我们还需要设置VSCode
的settings.json
文件,实现保存代码时就自动执行ESLint
检查。VSCode
的setting.json
设置分为工作区和用户两个级别,其中用户区会对所有项目生效,而工作区的设置只会对当前项目生效。
-
用户区配置: 点击
VSCode
左下角的设置按钮,选择Settings
,选择以文本编辑形式打开settings.json
,并且在setting.json
中加入以下代码。配置完成之后,当我们保存某个文件时,就可以自动对当前文件进行ESLint
检查,并且自动对一些错误进行修复啦。{
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
}