vue 项目添加 Eslint
1.自动安装Eslint 插件,执行后,就会让你选择Eslint的验证风格,然后什么时候验证。vue add @vue/eslint2.自动vue Eslint插件,执行后,就会让你选择Eslint的验证风格,然后什么时候验证。vue add @vue/cli-plugin-eslint上两种会自动创建 .eslintrc.js 文件,并使用里面所选的验证风格,如果需要排除一些其他插件语法可以在文
·
收集到了大约3种方式:
1.自动安装Eslint 插件,执行后,就会让你选择Eslint的验证风格,然后什么时候验证。
vue add @vue/eslint
2.自动vue Eslint插件,执行后,就会让你选择Eslint的验证风格,然后什么时候验证。
vue add @vue/cli-plugin-eslint
上两种会自动创建 .eslintrc.js 文件,并使用里面所选的验证风格,如果需要排除一些其他插件语法可以在文件里加上下面的配置:
{
"globals": {
"wx": "readonly",
"uni": "readonly"
}
3.手动安装vue的Eslint插件。这种安装要自己手写插件风格
yarn add --dev eslint eslint-plugin-vue eslint-plugin-html eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard
手动创建.eslintrc.js 文件在文件里写入:
module.exports = {
extends: [
'plugin:vue/recommended'
],
rules: {
"no-alert": 0,
"no-multi-spaces": "error", // 禁止多个空格
//"semi": [2, "always"] ,// 自动补充分号
"quotes": ["error", "single"] // 使用单引号
}
}
手动装Eslint插件一些其他规则:
{
//在computed properties中禁用异步actions
'vue/no-async-in-computed-properties': 'error',
//不允许重复的keys
'vue/no-dupe-keys': 'error',
//不允许重复的attributes
'vue/no-duplicate-attributes': 'error',
//在 <template> 标签下不允许解析错误
'vue/no-parsing-error': ['error',{
'x-invalid-end-tag': false,
}],
//不允许覆盖保留关键字
'vue/no-reserved-keys': 'error',
//强制data必须是一个带返回值的函数
// 'vue/no-shared-component-data': 'error',
//不允许在computed properties中出现副作用。
'vue/no-side-effects-in-computed-properties': 'error',
//<template>不允许key属性
'vue/no-template-key': 'error',
//在 <textarea> 中不允许mustaches
'vue/no-textarea-mustache': 'error',
//不允许在v-for或者范围内的属性出现未使用的变量定义
'vue/no-unused-vars': 'error',
//<component>标签需要v-bind:is属性
'vue/require-component-is': 'error',
// render 函数必须有一个返回值
'vue/require-render-return': 'error',
//保证 v-bind:key 和 v-for 指令成对出现
'vue/require-v-for-key': 'error',
// 检查默认的prop值是否有效
'vue/require-valid-default-prop': 'error',
// 保证computed属性中有return语句
'vue/return-in-computed-property': 'error',
// 强制校验 template 根节点
'vue/valid-template-root': 'error',
// 强制校验 v-bind 指令
'vue/valid-v-bind': 'error',
// 强制校验 v-cloak 指令
'vue/valid-v-cloak': 'error',
// 强制校验 v-else-if 指令
'vue/valid-v-else-if': 'error',
// 强制校验 v-else 指令
'vue/valid-v-else': 'error',
// 强制校验 v-for 指令
'vue/valid-v-for': 'error',
// 强制校验 v-html 指令
'vue/valid-v-html': 'error',
// 强制校验 v-if 指令
'vue/valid-v-if': 'error',
// 强制校验 v-model 指令
'vue/valid-v-model': 'error',
// 强制校验 v-on 指令
'vue/valid-v-on': 'error',
// 强制校验 v-once 指令
'vue/valid-v-once': 'error',
// 强制校验 v-pre 指令
'vue/valid-v-pre': 'error',
// 强制校验 v-show 指令
'vue/valid-v-show': 'error',
// 强制校验 v-text 指令
'vue/valid-v-text': 'error'
}
其他Rules,官网都有。比如:
{
"indent": ["error", 2] //2 个空格缩进
}
更多推荐
已为社区贡献1条内容
所有评论(0)