vscode 格式化
vscode 安装 插件
- 把其他的一些 js、css、html format 插件删除，避免互相影响
- dbaeumer.vscode-eslint（用于eslint报错和格式化）
- octref.vetur（用于vue文件识别）
- mikebovenlander.formate（vscode没有自动格式化css的程序，用于格式化css和less等）
settings.json 参考统一配置
{
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Community Material Theme",
"window.zoomLevel": 0,
"editor.fontSize": 16,
"editor.tabSize": 2,
"leetcode.endpoint": "leetcode",
"leetcode.defaultLanguage": "javascript",
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"typescript.updateImportsOnFileMove.enabled": "always",
"leetcode.hint.commentDescription": false,
"leetcode.hint.configWebviewMarkdown": false,
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"go.formatTool": "goimports",
"go.useLanguageServer": true,
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
"json.schemas": [],
// ===== 下面是后加的 =====
"emmet.syntaxProfiles": {
"javascript": "jsx",
"vue": "html",
"vue-html": "html"
},
"eslint.options": {
//指定vscode的eslint所处理的文件的后缀
"extensions": [
".js",
".vue",
".ts",
".tsx"
]
},
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
"[json]": {
"editor.quickSuggestions": {
"strings": true
},
"editor.suggest.insertMode": "replace",
"gitlens.codeLens.scopes": [
"document"
]
},
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"git.enableSmartCommit": true,
"editor.quickSuggestions": {
"strings": true
},
// 以下程序用于格式化Vue项目，其他项目可以根据原理一通百通。
// 设置保存时格式化。只用于用于格式化css/less程序
"editor.formatOnSave": true,
// 关闭js/ts的默认format,统一用eslint进行格式化（tslint已经不维护了，所以转eslint吧）
"javascript.format.enable": false,
"typescript.format.enable": false,
// 关闭vetur的js/ts/html的formatter。html用eslint-plugin-vue格式化。
// js/ts程序用eslint，防止vetur中的prettier与eslint格式化冲突
"vetur.format.defaultFormatter.html": "none",
"vetur.format.defaultFormatter.js": "none",
"vetur.format.defaultFormatter.ts": "none",
// 开启eslint自动修复js/ts功能
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
//一定要在vutur.defaultFormatterOptions参数中设置，单独修改prettier扩展的设置是无法解决这个问题的，因为perttier默认忽略了vue文件（事实上从忽略列表移除vue也不能解决这个问题）
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false, // 格式化不加分号
"singleQuote": true // 格式化以单引号为主
},
"js-beautify-html": {
// force-aligned | force-expand-multiline
"wrap_attributes": "force-aligned"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": true
}
},
"javascript.updateImportsOnFileMove.enabled": "never",
"workbench.editor.showTabs": true,
"terminal.integrated.rendererType": "dom",
"diffEditor.ignoreTrimWhitespace": false,
"formate.verticalAlignProperties": false,
"editor.fontLigatures": null,
"files.autoSave": "afterDelay"
}
注意
- 如果文件保存没有自动格式化，可以看下 settings.json 是否有格式错误，导致vscode 解析有问题
- vscode 的 auto save 设置，需要把 off 配置为 afterDelay
其他
如果有 git hook 需求，可以添加这个
"devDependencies": {
"lint-staged": "10.5.4",
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,vue,ts}": [
"vue-cli-service lint",
"git add"
]
}
