Open mengjoy opened 4 years ago
以前一些老项目是没有eslint的，现在要统一规范，所以需要在已有的项目中添加eslint，现在的解决办法是给每个项目添加eslint.js文件
1、需要添加eslint，则要先安装eslint的npm 包 2、eslint有官方推荐的规范，也有其他公司封装好的包，也可以选择自己写rules 我的项目vue版本是2.5.2,没有使用脚手架搭建,没有选择使用airbnb或者其他规范，选择了eslint-plugin-vue插件和官方推荐的一些规范。在自己配置了需要用到的rules
安装的包如下
"eslint": "^3.19.0", "eslint-friendly-formatter": "^2.0.7", "eslint-loader": "^1.7.1", "eslint-plugin-html": "^2.0.0", "eslint-plugin-vue": "5.2.2", "babel-eslint": "10.0.1",
3、包选用时的思考 eslint-friendly-formatter这个包是在终端输出错误报告的规范，默认是stylish，他会标记处那一行那一列出现了什么问题，不用去打开编辑器一个一个找，更准确定位问题。
eslint-plugin-html这个包是识别html，vue文件的
eslint-plugin-vue这个包是vue规范插件，规范参考链接： eslint-plugin-vue，这个包由多个版本，根据vue项目的版本来选用，规范要求也在链接中
babel-eslint这个包，是因为代码是es6所以，需要使用babel去解析
4、开始配置 安装完成后，在根目录创建一个.eslintrc.js文件 module.exports = { root: true, // 和解析的时有关系，root：true，就不会再上目录去查询其他的eslint配置了 parserOptions: { // 使用es6的话需要使用babel-lint解析器 parser: 'babel-eslint', // 代码是ECMAScript模块 sourceType: 'module' } // vue/base,vue/essential,vue/strongly-recommended,vue/recommended(最严谨，完全按照vue来check) extends: ['eslint:recommended','plugin:vue/recommended'], // 可以在html中使用eslint,elsint-plugin-vue检查template和script的js代码 plugins: ['html','vue'], // settings的import/resolver会传递给每个规则项，每个规则项都是用到这个fomatter 'settings': { 'import/resolver': { 'webpack': { 'config': 'build/webpack.base.conf.js' } } } rules: { // 配置自己的rules，可以覆盖默认的一些规则 } }
module.exports = {
root: true, // 和解析的时有关系，root：true，就不会再上目录去查询其他的eslint配置了
parserOptions: {
// 使用es6的话需要使用babel-lint解析器
parser: 'babel-eslint',
// 代码是ECMAScript模块
sourceType: 'module'
}
// vue/base,vue/essential,vue/strongly-recommended,vue/recommended(最严谨，完全按照vue来check)
extends: ['eslint:recommended','plugin:vue/recommended'],
// 可以在html中使用eslint,elsint-plugin-vue检查template和script的js代码
plugins: ['html','vue'],
// settings的import/resolver会传递给每个规则项，每个规则项都是用到这个fomatter
'settings': {
'import/resolver': {
'webpack': {
'config': 'build/webpack.base.conf.js'
rules: {
webpack.base.conf.js { test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', // 优先处理 include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范，默认是stylish } }
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre', // 优先处理
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范，默认是stylish
5、忽略文件 因为项目比较大，不可能一次性吧所有的都改完，因此可以写个忽略文件先改一部分的格式 eslint有一个.eslintignore文件，里面可以配置需要忽略的eslint检查的文件路径 举个🌰 build/.js config/.js
6、.editorConfig文件配置
其他公司的规范： 其他公司的规范 参考链接： eslint总结 eslint的学习，配置的参数代表什么 .editorConfig文件配置
学习了
AaronConlon
commented
4 years ago AaronConlon
commented
4 years ago
1、需要添加eslint，则要先安装eslint的npm 包 2、eslint有官方推荐的规范，也有其他公司封装好的包，也可以选择自己写rules 我的项目vue版本是2.5.2,没有使用脚手架搭建,没有选择使用airbnb或者其他规范，选择了eslint-plugin-vue插件和官方推荐的一些规范。在自己配置了需要用到的rules
安装的包如下
3、包选用时的思考 eslint-friendly-formatter这个包是在终端输出错误报告的规范，默认是stylish，他会标记处那一行那一列出现了什么问题，不用去打开编辑器一个一个找，更准确定位问题。
eslint-plugin-html这个包是识别html，vue文件的
eslint-plugin-vue这个包是vue规范插件，规范参考链接： eslint-plugin-vue，这个包由多个版本，根据vue项目的版本来选用，规范要求也在链接中
babel-eslint这个包，是因为代码是es6所以，需要使用babel去解析
4、开始配置 安装完成后，在根目录创建一个.eslintrc.js文件
module.exports = {root: true, // 和解析的时有关系，root：true，就不会再上目录去查询其他的eslint配置了parserOptions: {// 使用es6的话需要使用babel-lint解析器parser: 'babel-eslint',// 代码是ECMAScript模块sourceType: 'module'}// vue/base,vue/essential,vue/strongly-recommended,vue/recommended(最严谨，完全按照vue来check)extends: ['eslint:recommended','plugin:vue/recommended'],// 可以在html中使用eslint,elsint-plugin-vue检查template和script的js代码plugins: ['html','vue'],// settings的import/resolver会传递给每个规则项，每个规则项都是用到这个fomatter'settings': {'import/resolver': {'webpack': {'config': 'build/webpack.base.conf.js'}}}rules: {// 配置自己的rules，可以覆盖默认的一些规则}}webpack.base.conf.js
{test: /\.(js|vue)$/,loader: 'eslint-loader',enforce: 'pre', // 优先处理include: [resolve('src'), resolve('test')],options: {formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范，默认是stylish}}5、忽略文件 因为项目比较大，不可能一次性吧所有的都改完，因此可以写个忽略文件先改一部分的格式 eslint有一个.eslintignore文件，里面可以配置需要忽略的eslint检查的文件路径 举个🌰 build/.js config/.js
6、.editorConfig文件配置
其他公司的规范： 其他公司的规范 参考链接： eslint总结 eslint的学习，配置的参数代表什么 .editorConfig文件配置