脚本宝典收集整理的这篇文章主要介绍了vuecli结合eslint静态检查,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
搭建vue项目开发可能选择vue-cli项目脚手架快速创建vue项目。(https://github.com/vuejs/vue-...
npm install -g vue-cli
这种方式安装比较慢,可以用国内淘宝镜像安装,cnpm,安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
继续安装
cnpm install -g vue-cli
vue-cli脚手架自带webpack打包工具,创建一个基于webpack模板的新项目
vue init webpack my-project
这里需要进行一些配置,默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "my-project".
To get started:
cd my-project
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
## 配置esLint ##
eslint配置方式主要有两种:
一般需要我们去配置项包括:
vue-cli脚手架安装完成后,主要有几个地方配置了eslint。
.eslintignore类似Git的.gitignore用来配置不需要Eslint检查的文件
.eslintrc.js主要用来配置具体规则
.eslintignore文件
添加不启动静态检查的文件
build/*.js // 忽略build文件夹下所有的脚本文件
config/*.js
.eslintrc.js文件
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint', // 解析器为babel-eslint,可在package.json文件中配置
parserOptions: {
sourceType: 'module'
},
env: { //环境配置为浏览器
browser: true,
},
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
extends: 'standard', //文件配置继承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
}
}
说明: 在rules中每个配置项后面的第一个值为eslint规则的错误等级
"script" : {
"lint": "eslint --ext .js, .vue src"
}
"devDenpendencies" : {
"babel-eslint": "^7.1.1",
// 更多eslint文件
...
}
#### 3 在webpack配置文件中 ####
webpack.base.conf.js
module: {
rules: [
{
test: /.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
}
]
}
有时候代码里有些特殊情况需要我们在某一行或者某几行关闭ESLint检测,可以使用注释:
1,注释关闭所有规则
/* eslint-disable */
alert('foo');
/* eslint-enable */
2,关闭某一行的所有规则
alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');
3,在某一行关闭指定的规则
alert('foo'); // eslint-disable-line no-alert
// eslint-disable-next-line no-alert
alert('foo');
常用规则:
规则的细节请到ESLint官方网站查看 http://eslint.org/docs/rules/
以上是脚本宝典为你收集整理的vuecli结合eslint静态检查全部内容,希望文章能够帮你解决vuecli结合eslint静态检查所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。