vue文件代码缩进以及格式化代码方式[自定义]
作者:终究是半圈
这篇文章主要介绍了vue文件代码缩进以及格式化代码方式[自定义],具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue文件代码缩进及格式化代码[自定义]
文件->首选项->设置->
找到setting.json 替换以下内容。
{ "files.autoSave": "afterDelay", "files.autoSaveDelay": 3000, "files.associations": { "vue-html": "html", "vue": "html" }, "editor.tabSize": 4, "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.formatOnPaste": true, "editor.formatOnType": true, "vetur.format.defaultFormatter.html": "js-beautify-html", "editor.detectIndentation": false, "window.zoomLevel": 0, "npm.enableRunFromFolder": true, "vetur.format.options.tabSize": 4, "vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_attributes": "auto" }, "prettyhtml": { "printWidth": 100, "singleQuote": false, "wrapAttributes": false, "sortAttributes": false } } }
vue项目中常用的格式化代码
1.首先在Vscode编辑器中,同时按下 Shift + Ctrl + P,
2.在出现的搜索框中输入settings后,按下Enter键,
3.在出现的settings.json中粘贴如下代码。
{ "git.enableSmartCommit": true, // 修改注释颜色 "editor.tokenColorCustomizations": { "comments": { "fontStyle": "bold", // "foreground": "#82e0aa" } }, // 配置文件类型识别 "files.associations": { "*.js": "javascript", "*.json": "jsonc", "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" }, "extensions.ignoreRecommendations": false, "files.exclude": { "**/.DS_Store": true, "**/.git": true, "**/.hg": true, "**/.svn": true, "**/CVS": true, "**/node_modules": false, "**/tmp": true }, // "javascript.implicitProjectConfig.experimentalDecorators": true, "explorer.confirmDragAndDrop": false, "typescript.updateImportsOnFileMove.enabled": "prompt", "git.confirmSync": false, "editor.tabSize": 2, "editor.fontWeight": "500", "[json]": {}, "editor.tabCompletion": "on", "vsicons.projectDetection.autoReload": true, // "editor.fontFamily": "Monaco, 'Courier New', monospace, Meslo LG M for Powerline", "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "editor.fontSize": 16, "debug.console.fontSize": 14, "vsicons.dontShowNewVersionMessage": true, "editor.minimap.enabled": true, "emmet.extensionsPath": [ "" ], // vue eslint start 保存时自动格式化代码 "editor.formatOnSave": true, // eslint配置项,保存时自动修复错误 "editor.codeActionsOnSave": { "source.fixAll": true }, "vetur.ignoreProjectWarning": true, // 让vetur使用vs自带的js格式化工具 // uni-app和vue 项目使用 "vetur.format.defaultFormatter.js": "vscode-typescript", "javascript.format.semicolons": "remove", // // 指定 *.vue 文件的格式化工具为vetur "[vue]": { "editor.defaultFormatter": "octref.vetur" }, // // 指定 *.js 文件的格式化工具为vscode自带 "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, // // 默认使用prettier格式化支持的文件 "editor.defaultFormatter": "esbenp.prettier-vscode", "prettier.jsxBracketSameLine": true, // 函数前面加个空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": true, "prettier.singleQuote": true, "prettier.semi": false, // eslint end // react // 当按tab键的时候,会自动提示 "emmet.triggerExpansionOnTab": true, "emmet.showAbbreviationSuggestions": true, "emmet.includeLanguages": { // jsx的提示 "javascript": "javascriptreact", "vue-html": "html", "vue": "html", "wxml": "html" }, // end "[jsonc]": { "editor.defaultFormatter": "vscode.json-language-features" }, // @路径提示 "path-intellisense.mappings": { "@": "${workspaceRoot}/src" }, "security.workspace.trust.untrustedFiles": "open", "git.ignoreMissingGitWarning": true, "editor.fontSize": 15, "window.zoomLevel": 1.5, }
之后保存,即可。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。