【Tools】Vue + Eslint 配置指南
zh-rocco opened this issue · comments
初始化项目
vue create vue-example
配置
安装 VSCode 插件
- ESlint
- Prettier
- Vetur
VSCode settings.json 配置
.vscode/settings.json
{
"eslint.alwaysShowStatus": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
}
],
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
}
},
"vetur.validation.template": false
}
eslint 配置
.eslintrc.js
module.exports = {
root: true,
env: {
node: true,
},
extends: ['plugin:vue/recommended', '@vue/standard'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
quotes: ['error', 'single'],
semi: ['error', 'always'],
'arrow-parens': ['error', 'always'],
'comma-dangle': ['error', 'always-multiline'],
'space-before-function-paren': [
'error',
{
anonymous: 'never',
named: 'never',
asyncArrow: 'always',
},
],
camelcase: 'off',
'no-sequences': 'off',
'prefer-promise-reject-errors': 'off',
'standard/no-callback-literal': 'off',
'vue/name-property-casing': ['error', 'kebab-case'],
'vue/max-attributes-per-line': [
'error',
{
singleline: 1,
multiline: {
max: 1,
allowFirstLine: true,
},
},
],
'vue/html-closing-bracket-newline': [
'error',
{
singleline: 'never',
multiline: 'never',
},
],
'vue/singleline-html-element-content-newline': 'off',
},
parserOptions: {
parser: 'babel-eslint',
},
};
prettier 配置
.prettierrc
{
"tabWidth": 2,
"useTabs": false,
"singleQuote": true,
"semi": true,
"trailingComma": "all",
"bracketSpacing": true,
"arrowParens": "always"
}