eslint-config-jm v0.1.5
eslint-config-jm
ESLint shareable config for the JD-JM JavaScript style guide (ES2015+ version).
安装
$ npm install eslint eslint-config-jm --save-dev
使用方法
当 eslint-config-jm
安装完成后,你可以在 ESLint 配置文件 的 extends
部分添加字符串 eslingt-config-jm
,或是简单地写作 jm
,ESLint
将会自动帮您找到配置文件。
{
"extends": "jm",
"rules": {
// 可添加自己的规则
}
}
在工程中进行配置
基础配置
安装用于解析 module
的插件。
$ npm install babel-eslint eslint-loader --save-dev
在项目中找到 build/webpack.base.conf.js
文件,在 rules
中添加如下一段语句。
rules: [
{
test: /\.js$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')]
},
...
]
在根目录下添加 .eslintrc.js
文件,粘贴以下内容。
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 6,
ecmaFeatures: {
impliedStrict: true,
jsx: true,
modules: true
}
},
env: {
browser: true,
node: true,
commonjs: true,
amd: true,
es6: true
},
extends: 'jm' // 核心
}
之后只要启动 node
服务就能在控制台打印错误信息了,如果想要编辑器级别的错误提示请看下一节 《在编辑器中配置》
。
对于使用 vue-cli 2.0
构建的项目
基本操作与对于使用webpack进行配置的项目相同,但需要进行如下配置使 ESLint
能够解析 .vue
文件。
安装用于解析 .vue
的插件。
$ npm install eslint-plugin-html --save-dev
改写 build/webpack.base.conf.js
的 eslint
规则,监视 .vue
文件。
{
test: /\.(js|vue)$/,
...
}
改写 .eslintrc.js
文件,添加一个新的属性
{
plugins: ['html'],
...
}
对于使用 vue-cli 3.0
构建的项目
由于 vue-cli 3.0
中删除了 webpack.conf.js
,前面两段教程不再适用,我们将在 package.json
中配置项目。
安装 vue
的 ESLint
插件
$ npm install babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint --save-dev
由于 ESLint
是默认启用的,我们只需在 package.json
中添加几段代码即可。
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"jm"
],
"parserOptions": {
"parser": "babel-eslint"
}
},
...
在编辑器中配置
在使用的编辑中进行配置,编辑器会直接对不符合规范的代码进行标红,方便开发者在编码时就能快速定位错误。
Visual Studio Code
进入扩展中心安装ESLint
配置vscode,编辑
setting.json
,在末尾添加下面语句
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"html"
],
IntelliJ Idea
配置idea,file -> settings -> 搜索eslint -> ESLint,勾选
Enable
,其他默认,保存。搜索javascript,找到
Languages & Frameworks
下的javascript,选择javascript版本为ECMAScript 6
,使IDEA支持ES6语法搜索javascript,找到
Code Style
下的javascript,使用两个空格作为缩进。