Visual Studio Code安装ESLint
安装 Visual Studio Code ESLint 插件
打开 Visual Studio Code ,首先使用快捷键 Ctrl
+ Shift
+ P
调出VsCode的控制台,然后输入下面的命令安装ESLint
插件:
ext install ESLint
使用 NPM 安装 ESLint
为了方便我们通过ESLint命令行工具
来帮助我们生成ESLint
相关的配置,我们需要进行全局安装:
npm install eslint -g
安装完成后我们使用命令行工具进入到需要引入ESLint
的项目的目录中,然后输入下面的命令进行ESLint
的初始化操作:
eslint --init
执行命令后,我们选择相应的代码风格,也可以自定义,在这里我使用standard
风格的规则
安装完成后我们可以看到除了ESLint命令行工具
为我们生成的ESLint
依赖包,还有一个特殊的.eslintrc.json
文件,该文件是ESLint
的配置文件,如下所示:
{
"extends": "standard",
"installedESLint": true,
"plugins": [
"standard"
]
}
安装完成后我们使用 Visual Studio Code 打开项目,可以看到ESLint
插件在运行了,不过给了我们一个错误提示:
这时候我们需要在当面目录下输入下面的命令安装相应的开发依赖包:
npm install eslint-plugin-promise --save-dev
自定义配置项
----根据规则文档,编辑.eslintrc.js文件内容。
module.exports = {
"env": {
"node": true
},
"rules": {
// 强制使用一致的缩进
"indent": ["warn", "tab"],
// 禁止空格和 tab 的混合缩进
"no-mixed-spaces-and-tabs":1,
// 禁用 debugger
"no-debugger": 1,
// 禁止不必要的布尔转换
"no-extra-boolean-cast": 1,
// 强制所有控制语句使用一致的括号风格
"curly": 1,
// 禁止使用多个空格
"no-multi-spaces": 1,
// 要求在函数标识符和其调用之间有空格
"func-call-spacing": 1,
// 强制在函数括号内使用一致的换行
"function-paren-newline": ["warn", "never"],
// 强制隐式返回的箭头函数体的位置
"implicit-arrow-linebreak": 1,
// 强制在对象字面量的属性中键和值之间使用一致的间距
"key-spacing": 1,
// 强制在关键字前后使用一致的空格
"keyword-spacing":1,
// 要求调用无参构造函数时有圆括号
"new-parens":1,
// 禁止出现多行空行
"no-multiple-empty-lines":1,
// 要求使用分号代替 ASI
"semi":["warn","always"],
// 要求操作符周围有空格
"space-infix-ops":1
}
};
配置内容也可以写在package.json中,具体规则也是写在rules里。有时用vue-cli生成的项目会在package.json里看到这样的配置:
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
}
在 Vue-cli 创建的项目中,在代码顶部添加一行注释
/* eslint-disable */
这样,ESLint 在校验的时候就会跳过后面的代码,禁用单个 js 文件的ESLint 语法校验,但整个项目依然保留 ESLint 的校验规则
上一篇: Word文档如何给图片加上题注让用户更清楚的分辨和了解
下一篇: Mac OS X用户检查四部曲
推荐阅读
-
visual studio 2015离线版msdn下载和安装图文教程
-
Visual Studio 2010 安装 Mono for Android 的图文教程
-
Visual Studio 2017安装失败的解决方法
-
Visual Studio Code给文件添加文件图标主题的教程
-
Visual Studio 2017 (VS 2017)离线安装包制作方法
-
visual studio 2017企业版本安装(附序列号)
-
Visual Studio 2015和 .NET Core安装教程
-
Visual Studio 2015 安装图文详细步骤
-
如何安装visual studio 2015?visual studio 2015图文安装教程
-
安装MSDN后Visual Studio 2010编辑时报错