在setting.json里配置保存代码自动格式化,这个是我的配置
{
"files.associations": {
"*.wxml": "html",
"*.wxs": "javascript",
"*.wxss": "css",
"*.html": "html",
},
"files.eol": "\n",
"emmet.showAbbreviationSuggestions": true,
"emmet.showExpandedAbbreviation": "always",
"explorer.sortOrder": "type",
"javascript.updateImportsOnFileMove.enabled": "never",
"typescript.validate.enable": false,
"typescript.updateImportsOnFileMove.enabled": "always",
"ldgGist.accessToken": "console",
"search.followSymlinks": false,
"workbench.startupEditor": "none",
"workbench.statusBar.visible": true,
"workbench.iconTheme": "vscode-great-icons",
"stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass"],
// 配置
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "stylelint.vscode-stylelint"
},
// eslint
"eslint.run": "onSave",
"eslint.format.enable": true,
"eslint.workingDirectories": [{ "mode": "auto" }],
// vetur
"prettier.singleQuote": true,
// "vetur.format.options.tabSize": 2,
// "vetur.validation.template": false,
// "vetur.format.defaultFormatterOptions": {
// "js-beautify-html": {
// // #vue组件中html代码格式化样式
// "wrap_attributes": "auto", //也可以设置为“auto”,效果会不一样
// "wrap_line_length": 100,
// "end_with_newline": false,
// "semi": true,
// "singleQuote": true
// },
// 结尾使用分号
"prettier": {
"semi": true,
"singleQuote": true,
"printWidth": 100
}
// },
// "vetur.format.styleInitialIndent": true,
// "vetur.format.scriptInitialIndent": true,
// "vetur.format.defaultFormatter.js": "vscode-typescript",
// "vetur.format.defaultFormatter.html": "js-beautify-html",
// "vetur.format.defaultFormatter.scss": "prettier",
// "vetur.format.defaultFormatter.css": "prettier",
// 注释配置
"fileheader.customMade": {
"Author": "along", // 同时获取用户名与邮箱
"Description": "", // 介绍文件的作用、文件的入参、出参。
"Date": "Do not edit", // 文件创建时间(不变)
"LastEditors": "along", // 文件最后编辑者 与Author字段一致
"LastEditTime": "Do not edit", // 文件最后编辑时间
"FilePath": "Do not edit" // 文件在项目中的相对路径 自动更新
},
"moveCursor": true, // 自动移动光标到Description所在行
"fileheader.cursorMode": {
"description": "",
"param": "params",
"return": ""
},
"fileheader.configObj": {
"autoAdd": true, // 默认开启自动添加头部注释,当文件没有设置头部注释时保存会自动添加
"autoAlready": true, // 默认开启
"prohibitAutoAdd": ["json", "md"], // 禁止.json .md文件,自动添加头部注释
"wideSame": false, // 设置为true开启
"wideNum": 13, // 字段长度 默认为13
"atSymbol": ["@"], // 更改所有文件的自定义注释中的@符号
"functionParamsShape": ["{", "}"], // 函数参数外形自定义
"colon": [": "] // 更改所有文件的注释冒号
},
// git
"git.autofetch": true,
"git.enableSmartCommit": true,
"git.enabled": true,
// 编辑器设置
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.formatOnSave": true, // 保存代码自动格式化
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.fixAll": "explicit",
"source.fixAll.stylelint": "explicit"
},
"editor.autoIndent": "advanced",
"editor.tabSize": 2,
"editor.accessibilityPageSize": 500,
"editor.indentSize": "tabSize",
"editor.fontSize": 14,
"editor.renderWhitespace": "boundary",
"editor.cursorBlinking": "expand",
//代码统计
"VSCodeCounter.languages": {},
"VSCodeCounter.useGitignore": true, //使用.gitignore
"VSCodeCounter.outputAsCSV": false, //不输出CSV
"VSCodeCounter.exclude": [
//排除统计文件/文件夹
"**/.gitignore",
"**/.vscode/**",
"**/node_modules/**",
"**/dist/**",
"**/**.sql",
"**/.next/**",
"**/**.md",
"**/**.bat",
"**/package.json",
"**/tsconfig.json",
"**/**.json",
"**/yarn.lock"
],
// liveServer
"liveServer.settings.port": 8080, //设置本地服务的端口号
"liveServer.settings.host": "127.0.0.1", //设置本地服务的端口号
"liveServer.settings.root": "/", //设置根目录,也就是打开的文件会在该目录下找
"liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
"liveServer.settings.NoBrowser": false, //禁止自动启动浏览器
"liveServer.settings.ignoredFiles": [
//设置忽略的文件
".vscode/**",
"**/*.scss",
"**/*.sass"
],
// uniapp小程序
"uniapp-run.HBuilderX": "/Applications/HBuilderX.app",
"uniapp-run.wxDevtool": "/Applications/wechatwebdevtools.app",
// nuxtr
"nuxtr.vueFiles.firstTag": "template",
"nuxtr.vueFiles.script.type": "setup",
"nuxtr.vueFiles.script.defaultLanguage": "ts",
"nuxtr.vueFiles.style.addStyleTag": true,
"nuxtr.vueFiles.style.alwaysScoped": true,
"nuxtr.vueFiles.style.defaultLanguage": "scss",
"nuxtr.openItemsAfterCreation": true,
"nuxtr.vueFiles.pages.defaultTemplate": "default.page-template",
"nuxtr.vueFiles.layouts.defaultTemplate": "default.layout-template",
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html"
},
"tabnine.experimentalAutoImports": true,
"window.zoomLevel": -1
}
写代码的时候,加上代码语言,保存就会自动格式化
格式化之前
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241003/79f2c0c6bd2dbddb1fe15cfb4b996ed2.png)
格式化之后
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241003/9b076a71d88b3bb417c734c9d0a9be45.png)