vscode保存⾃动格式化配置⾸先需要装⼀些vscode插件
eslint、Vetur、Prettier Now、koroFileHeader、live Server
在左下⾓设置界⾯，打开设置，修改配置⽂件settings.json
{
"lorTheme": "One Monokai",
"editor.fontSize": 14,
"ablePreview": true, //预览模式关闭
"editor.formatOnSave": true, // #每次保存的时候⾃动格式化
// ⾃动修复
"deActionsOnSave": {
"source.fixAll.eslint": true,浏览器json格式化
},
"able": true, //是否开启vscode的eslint
// 配置 ESLint 检查的⽂件类型
"eslint.validate": [
"javascript",
"vue",
"html"
],
"eslint.options": { //指定vscode的eslint所处理的⽂件的后缀
"extensions": [
".js",
".vue",
".ts",
".tsx"
]
},
"files.associations": {
"*.wpy": "vue",
"*.wxml": "wxml",
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript",
"*.html": "html"
},
"emmet.includeLanguages": {
"wxml": "html"
},
"minapp-vscode.disableAutoConfig": true,
// vscode默认启⽤了根据⽂件类型⾃动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
//  #去掉代码结尾的分号
"prettier.semi": false,
//  #使⽤单引号替代双引号
"prettier.singleQuote": true,
//  #让函数(名)和后⾯的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #让vue中的js按编辑器⾃带的ts格式进⾏格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"ableSmartCommit": true,
"editor.quickSuggestions": {
"strings": 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
},
},
// 插件KoroFileHeader
// ⽂件头部注释-快捷键crtl+alt+i（window）,ctrl+cmd+t (mac)    "fileheader.customMade": {
"Descripttion": "",
//"version": "",
"Author": "voanit",
"Date": "Do not edit",
"LastEditors": "voanit",
"LastEditTime": "Do not Edit"
},
//函数注释-快捷键ctrl+alt+t (window), ctrl+alt+t(mac)
"fileheader.cursorMode": {
"name": "",
// "test": "test font",
// "msg": "",
"param": "",
"return": ""
},
//安装live Server插件
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.NoBrowser": true,
"liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器    "liveServer.settings.host": "127.0.0.1",
"liveServer.settings.port": 5000, //设置本地服务的端⼝号
"": "/distserver",
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"abled": "never",
"perimentalDecorators": true,
"workbench.editor.showTabs": true,
"dererType": "dom",
"sync.gist": "396472a5bb443e3680d5a0e2ffccefe8",
"Level": 0,
"diffEditor.ignoreTrimWhitespace": false,
"launch": {},
"[jsonc]": {
"editor.defaultFormatter": "remimarsal.prettier-now"
},
"[typescript]": {
"editor.defaultFormatter": "remimarsal.prettier-now"
},
"json.schemas": [
{
"fileMatch": [
"/myfile"
],
"url": "schemaURL"
}
]
}
prettier Now配合eslint使⽤的，以上配置会存在eslint和Prettier Now冲突，需要在.eslintrc.js⾥⾯配置extends: [ 'prettier-now' ]，
perttier-now⼀定要放到最后这样才能覆盖eslint格式化的样式
-----------------------------------------------------------------

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。