关于.eslintrc.js 中的配置,可以参考文章:
上面的文章描述了eslint基础配置项的使用,及作者的自用版本源码。
粘一个fantastic的.eslintrc.js源码配置:
有些配置稍有点别手,自行修改吧
module.exports = {
root: true,
env: {
browser: true,
es6: true
},
globals: {
__dirname: true,
process: true,
require: true,
module: true,
// element-plus
ElMessage: true,
ElMessageBox: true,
ElNotification: true,
ElLoading: true
},
extends: [
'plugin:vue/vue3-recommended',
'plugin:vue/vue3-strongly-recommended',
'eslint:recommended'
],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: '2020',
ecmaFeatures: {
jsx: true
}
},
rules: {
// 代码风格
'block-spacing': [2, 'always'],
'brace-style': [2, '1tbs', {
'allowSingleLine': true
}],
'comma-spacing': [2, {
'before': false,
'after': true
}],
'comma-dangle': [2, 'never'],
'comma-style': [2, 'last'],
'computed-property-spacing': [2, 'never'],
'indent': [2, 4, {
'SwitchCase': 1
}],
'key-spacing': [2, {
'beforeColon': false,
'afterColon': true
}],
'keyword-spacing': [2, {
'before': true,
'after': true
}],
'linebreak-style': 0,
'multiline-ternary': [2, 'always-multiline'],
'no-multiple-empty-lines': [2, {
'max': 1
}],
'no-unneeded-ternary': [2, {
'defaultAssignment': false
}],
'quotes': [2, 'single'],
'semi': [2, 'never'],
'space-before-blocks': [2, 'always'],
'space-before-function-paren': [2, 'never'],
'space-in-parens': [2, 'never'],
'space-infix-ops': 2,
'space-unary-ops': [2, {
'words': true,
'nonwords': false
}],
'spaced-comment': [2, 'always', {
'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
}],
'switch-colon-spacing': [2, {
'after': true,
'before': false
}],
'object-curly-spacing': [2, 'always'],
// ES6
'arrow-parens': [2, 'as-needed'],
'arrow-spacing': [2, {
'before': true,
'after': true
}],
// Vue - https://github.com/vuejs/eslint-plugin-vue
'vue/multi-word-component-names': 0,
'vue/html-indent': [2, 2],
'vue/no-v-html': 0,
'vue/max-attributes-per-line': 0,
'vue/require-default-prop': 0,
'vue/singleline-html-element-content-newline': 0,
'vue/require-explicit-emits': [2, {
'allowProps': true
}],
'vue/script-indent': [2, 4, {
'switchCase': 1
}]
}
};
关于stylelint的使用
vscode 安装插件
Stylelint
Tailwind CSS IntelliSense
项目中安装依赖
npm install --save-dev stylelint stylelint-config-standard
yarn add -D stylelint stylelint-config-standard
项目中新建配置文件 stylelint.config.js
module.exports = {
extends: ["stylelint-config-standard"],
rules: {
"at-rule-no-unknown": [
true,
{
ignoreAtRules: [
"tailwind",
"apply",
"variants",
"responsive",
"screen",
],
},
],
"declaration-block-trailing-semicolon": null,
"no-descending-specificity": null,
},
};
修改setting.json,增加下面的配置
// 禁用 native linting,使用 Tailwind IntellSense 插件进行linting
"css.validate": false,
"less.validate": false,
"scss.validate": false,
完成,好好感受linting的痛苦吧~