安装vscode插件
- Vetur
- ESlint
- EditorConfig for VS Code
安装node插件
cnpm i -D eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue
项目配置文件
# .editorconfig
# http://editorconfig.org
root = true
[*]
#缩进风格:tab
indent_style = tab
#缩进大小4
indent_size = 4
#换行符lf
end_of_line =crlf
#字符集utf-8
charset = utf-8
#是否删除行尾的空格
trim_trailing_whitespace = true
#是否在文件的最后插入一个空行
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[Makefile]
indent_style = tab
.prettierrc.js
module.exports = {
// tabWidth: 2,
// useTabs: true,
semi: false,
}
.eslintrc.js
module.exports = {
root: true,
extends: [
'eslint:recommended',
'plugin:vue/recommended',
'plugin:prettier/recommended'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
"prettier/prettier": "error",
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// https://eslint.vuejs.org/rules/html-indent.html
'vue/html-indent': 0,
// https://eslint.vuejs.org/rules/max-attributes-per-line.html
'vue/max-attributes-per-line': 0,
// https://eslint.vuejs.org/rules/html-self-closing.html
'vue/html-self-closing': 0,
// https://eslint.vuejs.org/rules/script-indent.html#options
// "vue/script-indent": ["error", 'tab'],
// https://eslint.vuejs.org/rules/html-closing-bracket-newline.html
'vue/html-closing-bracket-newline': 0,
// https://eslint.vuejs.org/rules/component-tags-order.html
'vue/component-tags-order': 0,
}
}
{
"scm.alwaysShowProviders": true,
"scm.alwaysShowActions": true,
"terminal.integrated.allowMnemonics": true,
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"git.alwaysShowStagedChangesResourceGroup": true,
"workbench.panel.defaultLocation": "right",
"git.autofetch": true,
"git.confirmSync": false,
"git.enableSmartCommit": true,
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.options.useTabs": true,
"files.autoSave": "afterDelay",
"vetur.format.defaultFormatter.js": "prettier-eslint",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"vetur.validation.template": false,
"eslint.validate": [
"javascript",
"javascriptreact",
"vue"
],
}
ctrl + s / commond + s
搭配vue-property-decorator 使用
cnpm i -D @typescript-eslint/parser vue-property-decorator
eslint配置文件增加解析器选项 parserOptions
.eslintrc.js
module.exports = {
root: true,
parserOptions: {
parser: '@typescript-eslint/parser'
},
extends: [
'eslint:recommended',
'plugin:vue/recommended',
'plugin:prettier/recommended'
],
// required to lint *.vue files
plugins: [
'vue'
],
// add your custom rules here
rules: {
"prettier/prettier": "error",
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// https://eslint.vuejs.org/rules/html-indent.html
'vue/html-indent': 0,
// https://eslint.vuejs.org/rules/max-attributes-per-line.html
'vue/max-attributes-per-line': 0,
// https://eslint.vuejs.org/rules/html-self-closing.html
'vue/html-self-closing': 0,
// https://eslint.vuejs.org/rules/script-indent.html#options
// "vue/script-indent": ["error", 'tab'],
// https://eslint.vuejs.org/rules/html-closing-bracket-newline.html
'vue/html-closing-bracket-newline': 0,
// https://eslint.vuejs.org/rules/component-tags-order.html
'vue/component-tags-order': 0,
}
}
参考文档