1. Need to install eslint-vue plugin and eslint-js plugin
2. Then create the .eslintrc.js file in the project root directory
module.exports = {
'plugins': [
'vue'
],
'extends': ['eslint:recommended', 'plugin:vue/recommended'],
'env': {
'browser': true,
'node': true
},
'parserOptions': {
'ecmaVersion': 'latest',
'sourceType': 'module',
'ecmaFeatures': {
'jsx': true
},
'allowImportExportEverywhere': false
},
'globals': {
'uni': true,
'wx': true
},
'rules': {
'indent': [2, 'tab'], //缩进风格
'no-multi-spaces': 2, //效验多余空格
'quotes': [2, 'single'], // 强制使用单引号
'arrow-spacing': [2, {
// 箭头函数空格
'before': false,
'after': true
}],
'no-multiple-empty-lines': [2, {
'max': 1, // 连续空行数
'maxBOF': 0, // 在文件的开头处执行最大的连续空行数
'maxEOF': 0 // 在文件的结尾处执行最大的连续空行数
}],
'no-trailing-spaces': [2, {
'skipBlankLines': false, // 不允许在空行上有尾随空格
}],
'key-spacing': [2, {
'beforeColon': false
}], // 不允许key与冒号之间有空格
'no-whitespace-before-property': 2, // 不允许在对象和它们的属性之间留出空白
'semi': [2, 'never'], // 不带分号
'comma-spacing': [2, {
'before': false, // 逗号前面不能带空格
'after': true
}],
'space-in-parens': [2, 'never'], // 执行括号内没有空格
'no-dupe-args': 2, // 不允许在函数声明或表达式中出现重复的参数名
'no-dupe-else-if': 2, // 不允许在同一个 if-else-if 链中出现重复的条件
'no-duplicate-case': 2, // 禁止在 switch 的 case 子句中重复测试表达式
'no-duplicate-imports': 2, // 要求所有可以合并的单个模块的导入都在于一个 import 语句中
'no-empty-pattern': 2, // 禁止存在非结构化对象和数组中的任何空模式
'no-empty-function': 2, // 禁止出现空函数
'no-global-assign': 2, // 禁止对原生对象或只读的全局对象进行赋值
'no-ex-assign': 2, // 不允许在 catch 子句中重新分配异常
'no-sparse-arrays': 2, // 不允许数组存在空逗号
'no-unused-vars': 2, // 不允许存在未使用的变量、函数和函数参数
'for-direction': 2, // 不允许有for死循环
'array-callback-return': 2, // 数组的计算方法要有return
// html配置
'vue/html-indent': [2, 'tab'], // 标签缩进
// 'vue/no-use-computed-property-like-method': 2, // v-for v-if不能同时使用
'vue/require-prop-types': 2, // props属性要定义type
// 'vue/html-end-tags': 1,
'vue/component-definition-name-casing': [2, 'PascalCase'], // 组件名称用驼峰命名
'vue/max-attributes-per-line': [2, {
'singleline': {
'max': 3 // 一行最多3个属性
},
'multiline': {
'max': 1 // 换行之后每行一个属性
}
}],
'vue/multiline-html-element-content-newline': [1, {
// 元素内容换行
'ignoreWhenEmpty': true,
'ignores': ['pre', 'textarea'],
'allowEmptyLines': false
}],
'vue/singleline-html-element-content-newline': [0, {
// 元素内容换行
'ignoreWhenNoAttributes': true,
'ignoreWhenEmpty': true,
'ignores': ['pre', 'textarea']
}],
'vue/component-tags-order': [2, {
// 根标签排序
'order': ['template', 'script', 'style']
}],
'vue/attributes-order': [1, {
// 属性排序
'order': [
'DEFINITION',
'GLOBAL',
'UNIQUE',
'LIST_RENDERING',
'CONDITIONALS',
'RENDER_MODIFIERS',
'TWO_WAY_BINDING',
'OTHER_DIRECTIVES',
'OTHER_ATTR',
'EVENTS',
'CONTENT',
],
'alphabetical': true, //字母顺序
}],
},
'ignorePatterns': [
'dist/',
'unpackage/',
'node_modules/',
'uni_modules/',
]
}
3. Enable real-time validation and automatic repair
Setting path: Tools --> Settings --> Plugin Configuration
