1. vscode基础开发插件
vetur vue必备
VueHelper vue及相关技术栈语法提示
Auto Close Tag 自动闭合标签
Auto Rename Tag 自动更改对应标签名
Prettier 代码格式化
ESLint 代码规范
JavaScript (ES6) code snippets javascript语法提示
2. 配置vscode settings.json
{
// 基础设置
"editor.tabSize": 2,
"workbench.iconTheme": "vscode-icons",
"workbench.startupEditor": "welcomePage",
"editor.quickSuggestions": {
"strings": true
},
// vue设置
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"files.associations": {
"*.vue": "vue"
},
// vetur设置
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
// eslint设置
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
// format设置
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
"prettier.singleQuote": true,
"prettier.semi": false,
"prettier.useTabs": true,
// git设置
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false,
"suppressUpdateNotice": false,
"suppressWelcomeNotice": true
}
}
3. ESLint配置文件
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'no-tabs': 0,
'space-before-function-paren': 0
}
}