vscode编辑器自定义配置

2023-07-29,,

{
//删除文件确认
"explorer.confirmDelete": false,
// 主题
"workbench.iconTheme": "vscode-icons",
// 小地图
"editor.minimap.enabled": true,
// 主题风格One Dark Pro
// "workbench.colorTheme": "One Dark Pro",
//窗口大小比例
// "window.zoomLevel": 1,
// "extensions.autoUpdate": false,
// 字体大小
// "editor.fontSize": 13,
"editor.snippetSuggestions": "top",
"diffEditor.ignoreTrimWhitespace": true,
// 设置格式化缩进4格
// "prettier.tabWidth": 4,
"vetur.format.defaultFormatter.html": "prettier",
// "gitlens.advanced.messages": {
// "suppressShowKeyBindingsNotice": true
// },
// "gitlens.historyExplorer.enabled": true,
// "atomKeymap.promptV3Features": true,
"editor.multiCursorModifier": "ctrlCmd",
//粘贴自动格式化
"editor.formatOnPaste": false,
//保存自动格式化
"editor.formatOnSave": false,
// 用来忽略工程打开的文件夹
"files.exclude": {
"**/.vscode": true,
"**/.DS_Store": true,
"**/.history":true,
"**/nbproject":true
},
// 用来忽略搜索的文件夹
"search.exclude": {
"**/node_modules/**": true,
"**/bower_components/**": true,
"**/image/**": true,
"**/*.xml": true,
"**/.history/**":true,
"**/nbproject/**":true,
"**/vscode/**":true },
// // 创建和更新代码的头部信息作者
// "fileheader.Author": "Baldwin",
// "fileheader.LastModifiedBy": "Baldwin",
}

以上是简单的示例:

实际使用中发现默认管理员、用户与工作组使用的配置均为空{},而且vscode自带git配置(不需要再下载配置插件);

但为了更加美观和智能,还是推进安装一些插件,如:主题、图标、语法校验、代码格式化、代码提示、编辑器背景色或布局等

推荐插件与配置】:https://zhuanlan.zhihu.com/p/64021066

示例1:

{ // VScode主题配置
"editor.tabSize": 2,
"editor.lineHeight": 24,
"editor.renderLineHighlight": "none",
"editor.renderWhitespace": "none",
"editor.fontFamily": "Consolas",
"editor.fontSize": 15,
"editor.cursorBlinking": "smooth",
"editor.multiCursorModifier": "ctrlCmd",
"editor.formatOnPaste": true,
// 是否允许自定义的snippet片段提示,比如自定义的vue片段开启后就可以智能提示
"editor.snippetSuggestions": "top",
"workbench.iconTheme": "vscode-icons",
"workbench.colorTheme": "One Dark Pro Vivid",
"workbench.startupEditor": "newUntitledFile",
"html.suggest.angular1": false,
"html.suggest.ionic": false,
"files.trimTrailingWhitespace": true,
// vetur插件格式化使用beautify内置规则
"vetur.format.defaultFormatter.html": "js-beautify-html",
// VScode 文件搜索区域配置
"search.exclude": {
"**/dist": true,
"**/build": true,
"**/elehukouben": true,
"**/.git": true,
"**/.gitignore": true,
"**/.svn": true,
"**/.DS_Store": true,
"**/.idea": true,
"**/.vscode": false,
"**/yarn.lock": true,
"**/tmp": true
},
// 排除文件搜索区域,比如node_modules(贴心的默认设置已经屏蔽了)
"files.exclude": {
"**/.idea": true,
"**/yarn.lock": true,
"**/tmp": true
},
// 配置文件关联,以便启用对应的智能提示,比如wxss使用css
"files.associations": {
"*.vue": "vue",
"*.wxss": "css"
},
// 配置emmet是否启用tab展开缩写
"emmet.triggerExpansionOnTab": true,
// 配置emmet对文件类型的支持,比如vue后缀文件按照html文件来进行emmet扩写
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html",
"javascript": "javascriptreact",
// xml类型文件默认都是单引号,开启对非单引号的emmet识别
"xml": {
"attr_quotes": "single"
}
},
// 在react的jsx中添加对emmet的支持
"emmet.includeLanguages": {
"jsx-sublime-babel-tags": "javascriptreact"
},
// 是否开启eslint检测
"eslint.enable": false,
// 文件保存时,是否自动根据eslint进行格式化
"eslint.autoFixOnSave": true,
// eslint配置文件
"eslint.options": {
"plugins": [
"html",
"javascript",
{
"language": "vue",
"autoFix": true
},
"vue"
]
},
// eslint能够识别的文件后缀类型
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue",
"typescript",
"typescriptreact"
],
// 快捷键方案,使用sublime的一套快捷键
"sublimeTextKeymap.promptV3Features": true,
// 格式化快捷键 shirt+alt+F
// prettier进行格式化时是否安装eslint配置去执行,建议false
"prettier.eslintIntegration": true,
// 如果为true,将使用单引号而不是双引号
"prettier.singleQuote": true,
// 细节,配置gitlen中git提交历史记录的信息显示情况
"gitlens.advanced.messages": {
"suppressCommitHasNoPreviousCommitWarning": false,
"suppressCommitNotFoundWarning": false,
"suppressFileNotUnderSourceControlWarning": false,
"suppressGitVersionWarning": false,
"suppressLineUncommittedWarning": false,
"suppressNoRepositoryWarning": false,
"suppressResultsExplorerNotice": false,
"suppressUpdateNotice": true,
"suppressWelcomeNotice": false
},
// 开启apicloud在vscode中的wifi真机同步
"apicloud.port": "23450",
// 设置apicloud在vscode中的wifi真机同步根目录
"apicloud.subdirectories": "/apiclouduser",
// git是否启用自动拉取
"git.autofetch": true,
"vsicons.dontShowNewVersionMessage": true,
"window.zoomLevel": 0,
"colorize.ignore_search_variables_info": true,
"files.autoSave": "afterDelay",
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
}
}

示例2:

{
"workbench.startupEditor": "welcomePage",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
// 是否允许自定义的snippet片段提示,比如自定义的vue片段开启后就可以智能提示
"editor.snippetSuggestions": "top",
"workbench.iconTheme": "vscode-icons",
"editor.tabSize": 2,
"eslint.validate": [
// "javascript",
"javascriptreact",
"html",
"vue",
{
"language": "html",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
"window.zoomLevel": 0,
"search.location": "panel",
"gitlens.advanced.fileHistoryFollowsRenames": false,
"peacock.favoriteColors": [
{
"name": "Angular Red",
"value": "#b52e31"
},
{
"name": "Auth0 Orange",
"value": "#eb5424"
},
{
"name": "Azure Blue",
"value": "#007fff"
},
{
"name": "C# Purple",
"value": "#68217A"
},
{
"name": "Gatsby Purple",
"value": "#639"
},
{
"name": "Go Cyan",
"value": "#5dc9e2"
},
{
"name": "Java Blue-Gray",
"value": "#557c9b"
},
{
"name": "JavaScript Yellow",
"value": "#f9e64f"
},
{
"name": "Mandalorian Blue",
"value": "#1857a4"
},
{
"name": "Node Green",
"value": "#215732"
},
{
"name": "React Blue",
"value": "#00b3e6"
},
{
"name": "Something Different",
"value": "#832561"
},
{
"name": "Vue Green",
"value": "#42b883"
}
],
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"git.autofetch": true
}

vscode编辑器自定义配置的相关教程结束。

《vscode编辑器自定义配置.doc》

下载本文的Word格式文档,以方便收藏与打印。