大家好,又见面了,我是你们的朋友全栈君。
新公司的Vue项目没有配置eslint,虽然平时coding的时候都会按照eslint的标准去写,但是没有统一的配置后期项目代码review的时候总还是不太方便。
Vue的项目配置eslint还是很简单的。它属于依赖插件中的一种,可以像安装其他插件一样在命令行用npm install eslint -g安装,也可以修改package.json文件去更新项目的依赖包,重新跑一遍npm install就可以了。
eslint常用的依赖有很多,我贴出我用的一些。在package.jsonde 的dependencies或者devDependencies中添加下列属性即可:
"babel-eslint": "^7.1.1",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.6.1",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
然后重跑一遍npm install。不用担心,因为只添加了这几个依赖,速度会比较快,不会耽误太多开发的时间。
安装完依赖包之后不会生成 eslintrc.js这个配置文件,需要别的项目拷或者自己查阅官网配置。。。。我是菜鸡…拷的。
可以原封不动拷进去!
// http://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
}
新建js文件并命名为.eslintrc.js然后把上面的代码复制粘贴进去。
项目中配置好eslint后,还需要到编辑器的设置里边去打开eslint的开关。这里以webstorm为例。
然后apply–>OK就好了。
(———————————-割————————————-)
有些小伙伴担心项目以前没有按照eslint的规范写,配置好以后满篇的错误怎么办。不用担心,你的ide会帮你做很多事情。
还是以强大的webstorm为例,对单个文件点击右键–>Fix ESLint Problems
当然,你可以对整个项目点击右键,那就是依照eslint的代码标准格式化项目代码。
好的代码规范会让你的代码无论何时打开,都不至于乱到不想多看。其实写的久了,不用eslint,一样可以写出整洁漂亮的代码。因为,习惯是最有效的约束。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150494.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...