1、打开文件-----首选项------设置
点击右上角打开配置文件
复制下面代码段。
{
// VScode主题配置
"editor.tabSize": 4,
"editor.lineHeight": 30,
"editor.fontSize": 18,
"editor.cursorBlinking": "smooth",
"editor.multiCursorModifier": "ctrlCmd",
"editor.wordWrap": "off", // 永不换行
"editor.wordWrapColumn": 800, // 当一行的字符超过400个,进行换行
"editor.mouseWheelZoom": true,
// 主题
"workbench.iconTheme": "vscode-great-icons",
"workbench.startupEditor": "newUntitledFile",
"workbench.colorTheme": "Snazzy Light",
"workbench.colorCustomizations": {
"editorIndentGuide.activeBackground": "#ff0000" // 设置guide线高亮颜色,可以改为自己喜欢的颜色
},
"editor.snippetSuggestions": "bottom", // 代码提示。许多插件都有代码提示,代码缩写提示优先显示在最上方。
"editor.quickSuggestions": {
// 是否显示可能用到的示例代码.安装插件过多,建议选项也会非常多
"other": true,
"comments": true,
"strings": false
},
"editor.formatOnPaste": false, // 粘贴的内容, 是否自动格式化
"editor.formatOnSave": false, // 保存文件时,则自动格式化 (注意:如果此条规则开启,那么 { codeActionsOnSave source.fixAll }则应该设置为关闭,否则在文件保存时,会被自动格式化两次,没有必要)
"editor.codeActionsOnSave": {
"source.organizeImport": true,
"source.fixAll": true, // 对所有文件,保存时自动格式化
"source.fixAll.eslint": false, // 定制. 也可以在文件保存时,禁用eslint规则生效
"source.fixAll.tslint": false,
"source.fixAll.stylelint": false
},
// css2rem插件: 书写css时,px单位自动提示转换为rem单位
// 此处根字体大小设置为100(默认为16)
"cssrem.rootFontSize": 100,
// 设置终端的命令工具,比如我用到了 cmder,那么可以把这里的地址改为电脑cmder的安装位置
// 强烈推介终端启动快捷键: ctrl + C
"terminal.integrated.shell.windows": "C:\\windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
"workbench.editor.limit.enabled": true, // 是否限制每一个VSCODE窗体内显示的编辑器窗体数量(默认为关闭)。
"workbench.editor.limit.perEditorGroup": true, // 是对打开的所有VSCODE窗体进行限制还是只对当前VSCODE窗体限制
"workbench.editor.limit.value": 8, // 打开的编辑器的最大数量(默认为10个)
"javascript.updateImportsOnFileMove.enabled": "always", // 移动文件或者修改文件名时,是否自动更新引用到自此文件的所有文件。
"javascript.implicitProjectConfig.experimentalDecorators": true, // 对于非js文件,是否自动启用一份默认的ts配置
"[html]": {
// 对html文件,使用 vscode.html-language-features(HTML语言功能) 进行格式化
"editor.defaultFormatter": "vscode.html-language-features"
},
"[vue]": {
// 对vue文件,使用 vetur插件内置的默认风格 进行格式化
"editor.defaultFormatter": "octref.vetur"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
// 对json文件,使用 JSON语言功能 进行格式化
"editor.defaultFormatter": "vscode.json-language-features"
},
"[markdown]": {
// 对md文件,使用 Prettier 进行格式化
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"breadcrumbs.enabled": true, // 启用/禁用顶部面包屑导航(可以直接跳转文件)
"open-in-browser.default": "chrome", // 配置打开html文件的默认浏览器
"search.exclude": {
// VScode进行文件搜索时,不搜索这些区域。注意:vs已经贴心默认设置了 node_modules 和 bower_components 文件夹,所以这里没有加进去
"**/.git": true,
"**/.gitignore": true,
"**/.svn": true,
"**/.DS_Store": true,
"**/.idea": true,
"**/.vscode": false,
"**/yarn.lock": true,
"**/tmp": true,
"**/dist": true,
"**/build": true
},
// 配置文件关联
"files.associations": {
// 比如小程序中的 .wxss 这种文件,会把它作为css文件来处理,提供对应的css的语法提示,css的格式化等。
"*.wxss": "css",
"*.cjson": "jsonc",
"*.wxs": "javascript",
"*.ts": "typescript",
"*.vue": "vue",
"*.dart": "dart"
},
// vscode已经内置了emmet。配置emmet是否启用tab展开缩写
// 这一设置最大作用是:当输入的文本不属于Emmet定义的缩写规则时,依然允许使用Tab键进行缩进。此时会提示我自定义的缩写语句,以及各插件自定义的缩写语句.
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true, // 是否启用emmet代码提示
"emmet.syntaxProfiles": {
// 配置emmet对哪种文件类型支持
"vue-html": "html",
"vue": "html",
"javascript": "javascriptreact",
"xml": {
"attr_quotes": "double"
}
},
"emmet.includeLanguages": {
"wxml": "html",
"vue-html": "html",
"javascript": "javascriptreact",
"jsx-sublime-babel-tags": "javascriptreact", // 在 react 的jsx中添加对emmet的支持
},
// 介格式化快捷键: shirt+alt+F,有时可能需要多按几次
// 使用 shirt+alt+F进行格式化时,先执行编辑器的格式化规则,然后才会按照 eslint 和 tslit 等其他插件去格式化。
// 是否 开启 eslint代码规范检测 (与后面的tslint选择开启一种即可)
"eslint.enable": true,
"eslint.format.enable": true, // 是否 根据自己配置的 eslint配置文件, 对代码进行格式化
"eslint.options": {
// eslint配置文件 ,修改为你自己电脑上的文件位置,或者直接删除
"configFile": "D:/worksapce/youxiang-mobile-master/.eslintrc.js",
"plugins": [
"html"
]
},
"eslint.validate": [
// eslint规则对以下几种后缀文件生效
"javascript",
"javascriptreact",
"html",
"typescript",
"typescriptreact"
],
"typescript.validate.enable": false, // 是否开启 tslint代码规范检测
"[typescript]": {
// 对ts文件进行格式化时,使用哪一种风格 (此处使用的是vscode中安装的ts插件默认风格进行格式化)
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"git.autofetch": true, // 在push代码时,是否先自动从远端拉取代码
"gitlens.advanced.messages": {
// 配置gitlen中git提交历史记录的信息显示情况
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false,
"suppressResultsExplorerNotice": false,
"suppressShowKeyBindingsNotice": true,
"suppressUpdateNotice": true,
"suppressWelcomeNotice": false
},
"debug.openDebug": "openOnDebugBreak", // 断点调试时,遇到断点,自动显示调试视图。(全局的,不可为每种语言单独配置)
/// **python开发专用配置** 是否格式化python文件
"python.linting.enabled": false,
"minapp-vscode.disableAutoConfig": true,
// **apicloud开发专用配置** 设置端口。开启apicloud在vscode中的wifi真机同步
"apicloud.port": "23450",
"apicloud.subdirectories": "/apicloudproject", // 设置apicloud在vscode中的wifi真机同步根目录,默认可不设置
/// **dart语言专用配置**
"dart.warnWhenEditingFilesOutsideWorkspace": true,
"dart.openDevTools": "flutter",
"dart.enableCompletionCommitCharacters": true,
"dart.flutterHotRestartOnSave": true,
"dart.lineLength": 120,
"dart.previewFlutterUiGuides": true,
"dart.triggerSignatureHelpAutomatically": true,
"[dart]": {
// 保存文件时,是否自动格式化代码,
"editor.formatOnSave": false,
// 当你输入特定字符时,是否自动格式化代码,(比如输入 `;` 和 `}`).
"editor.formatOnType": true,
// 在80个字符处画一条引导线,这个范围内的dart代码将被格式化。
"editor.rulers": [
80
],
// 禁用与所选内容匹配的单词的内置突出显示。如果不这样做,所选文本的所有实例都将突出显示,从而影响Dart突出显示所选变量的精确引用的能力。
"editor.selectionHighlight": false,
// 默认情况下,当处于“代码片段模式”(在插入的代码中编辑占位符)时,VS会防止snippets弹出打开。
// 如果设置为“false”,则表示允许完成操作打开,就像不在代码段占位符中
"editor.suggest.snippetsPreventQuickSuggestions": false,
// coding时,VScode会给我们给多提示,在所有的提示选项中会默认选中第一个,这一配置就是表示默认选中哪一项。
// 默认值为:"first",表示VScode将总是选中第一项
// (推介) "recentlyUsed" 表示vs code将从代码提示中,预先选中最近使用过的项,
"editor.suggestSelection": "recentlyUsedByPrefix",
// 允许使用按<tab>速写代码片段,例如,输入“for”时,即使完成列表不可见。
"editor.tabCompletion": "onlySnippets",
// 默认情况下,当前的语言没有代码片段提示时,VS Code将使用当前文件中的你自己写过的单词来显示代码片段提示。
// 这导致代码完成在编辑注释和字符串时建议单词。 此设置将阻止这种情况
// 对于dart来说最好关闭,对于html和css建议开启
"editor.wordBasedSuggestions": false,
// 在文件底部添加新代码行时,强制所有文件都有一行空格。
"files.insertFinalNewline": true
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"window.zoomLevel": 1,
"editor.rulers": [],
"vetur.format.options.tabSize": 4,
"editor.detectIndentation": false,
// 配置格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typ=script",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
},
}
格式化设置缩进还需要看两个地方
进入==》设置,输入tabsize
输入detectindentation