VSCode配置
第一步:安装vetur插件
第二步:打开文件 > 首选项 > 设置,点击打开配置文件 settings.json
第三步:按需配置
{
"editor.tabSize": 2, // tab 大小为2个空格
"editor.formatOnSave": false, // 禁止保存的时候格式化
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 函数名称前加一个空格
"[vue]": {
"editor.defaultFormatter": "octref.vetur" // 格式化插件配置,设置为vetur
},
"vetur.format.options.tabSize": 2,
"vetur.format.options.useTabs": false,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": true, // 设置分号
"singleQuote": true, // 是否应用单引号,true 是、false 否(双引号)
"trailingComma": "none", // 禁止随时添加逗号,这个很重要
"printWidth": 100, // 设置行的最大字符数
},
"js-beautify-html": {
// #vue组件模板中html代码格式化样式
// - auto 仅在超出行长度时才对属性进行换行
// - force 对除第一个属性外的其他每个属性进行换行
// - force-aligned 对除第一个属性外的其他每个属性进行换行,并保持对齐
// - force-expand-multiline 对每个属性进行换行
// - aligned-multiple 当超出这行长度时,将属性进行垂直对齐
"wrap_attributes": "aligned-multiple",
"wrap_attributes_mode": "auto",
"wrap_line_length": 100,
"wrapped_attributes_per_line": "multiple",
"wrapped_attributes_indent": "auto",
"wrapped_attributes_end": "auto",
"end_with_newline": false,
"semi": true,
"singleQuote": true
},
},
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
}
}
prettierrc 配置
在项目根目录中新增 .prettierrc 文件,配置:
{
"singleQuote": true, // 双引号是否变成单引号
"semi": false, // 结尾是否设置分号
"trailingComma": "none" // 禁止随时添加逗号,这个很重要
}
ESLint 配置
修改根目录下 .eslintrc.js 文件:
{
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // allow debugger during development
"quotes": [1, "single"], // 引号类型 `` "" ''
"no-extra-semi": 2, // 禁止多余的冒号
"space-before-function-paren": [0, "always"], // 函数定义时括号前面要不要有空格
}
ESlint 详细规则参见:https://www.cnblogs.com/HanJie0824/p/12022521.html