eslint配置解析,帮你快速上手。

官网的文档一般写的比较隐晦难懂,我整理一些通用的配置,帮助新手上手。vue

学习时能够对照官网 eslint文档node

1.基本配置

.eslintrc.js

module.exports = {
	/**
	* 1.  eslint默认会遍历到父级文件去寻找 “.eslintrc.js ”文件;
	* 2. root:true,设置本文件所在目录为根目录root,所以不会去父级遍历
	*/
	root: true,

	/**告诉eslint脚本的运行环境,
	* 开启node时,程序中能使用global 等,
	* 开启es6时,程序中能使用let、const 等,
	*/
	env: {
	"node": true,
	"browser": true,
	"es6": true,
	},

	/**
	* eslint默认定义的key是全局的变量。这样子就能在文件中使用key变量了。
	* value为true时能够覆盖,flase时不能够覆盖
	*/
	globals: {
	"key": true,
	},

	/** 定义eslint将会使用到的插件,插件会输出规则
	* 1.规则能够多个,
	* 如 “eslint-plugin-rvue/essential”、“eslint-plugin-rvue/recommended ”
	* 2.插件能够省略前缀“eslint-plugin-”
	* 3.插件是第3方包,要用npm安装,$ npm install eslint-plugin-vue --save-dev
	*/
	plugins: [
	"vue"
	],

	/** eslint使用的校验规则
	* 1.内置配置:"eslint:recommended"、“eslint:all”;
	* 2.插件提供的配置(使用插件配置前需在plugin中定义):
	* “plugin:vue/essential”、"plugin:react/recommended"
	*/
	'extends': [
	"eslint:recommended",
	"plugin:vue/recommended"
	],

	//启用、覆盖、改写“extends”定义的规则
	rules: {
	'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
	'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
	'no-undef': process.env.NODE_ENV === 'production' ? 'error' : 'off'
	},

	parserOptions: {
	//自动化构建工具的构建流程
	//1.代码被babel解析成babel代码
	//2.eslint解析器”babel-eslint“ 将 babel 代码解析成eslint能使用的代码。
	parser: 'babel-eslint'
	}
}

2.文件中禁用eslint

1.禁用注释间的几行react

/* eslint-disable */
    	alert('foo');
    /* eslint-enable */

2.禁用整个文件es6

将 /* eslint-disable */ 块注释放在文件顶部

3.禁用行npm

alert('foo'); // eslint-disable-line

// eslint-disable-next-line
alert('foo');

3. .eslintrc.js文件的优先级从高到低

  1. 同目录下的.eslintrc.js文件
  2. 直到根目录(包括根目录)或直到发现一个有"root": true的配置
相关文章
相关标签/搜索