Skip to content
On this page

vscode 配置

有些公司限制 vscode 设置同步,故把我的 vscode 设置放在这里,再复制公司电脑上。

全局settings.json

js
{
  // 'Fira Code','JetBrains Mono',
  "editor.fontFamily": "'Fira Code','JetBrains Mono',Menlo, Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 18,
  //一个制表符等于的空格数。该设置在`editor.detectIndentation`
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "editor.fontWeight": "400",
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.matchBrackets": "always",
  "editor.highlightActiveIndentGuide": true,
  // 视区宽度内自动换行
  "editor.wordWrap": "on",
  "editor.tabCompletion": "on", // 推荐值 tab 自动完成
  // 代码建议补全
  "editor.suggestSelection": "recentlyUsedByPrefix",
  "editor.linkedEditing": true, // 修改html标签联动编辑
  // 在一定数量的等宽字符后显示垂直标尺。输入多个值,显示多个标尺。若数组为空,则不绘制标尺
  // 前端项目似乎不需要
  "editor.rulers": [],
  // 特定语言设置垂直标尺
  "[python]": {
    "editor.rulers": [79, 120]
  },
  // vscode 默认启用了根据文件类型自动设置tabSize的选项
  // "editor.detectIndentation": false,
  "editor.renderIndentGuides": true,
  "editor.renderControlCharacters": true,
  "editor.copyWithSyntaxHighlighting": false,
  "editor.formatOnPaste": true, // 粘贴时格式化
  // 智能提示配置
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  // 每次保存的时候自动格式化
  // NOTE 不开启,否则 eslint 的 vue/max-attributes-per-line 和 prettier 冲突
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  // # 每次保存的时候将代码按 eslint 格式进行修复
  "editor.codeActionsOnSave": {
    // 保存时的行为
    "source.fixAll": true,
    "source.organizeImports": false,
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true
  },
  // 自动保存时延
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.associations": {
    "*.vue": "vue",
    "*.html": "html"
  },
  "explorer.confirmDelete": true,
  // 垂直标尺的颜色设置
  "workbench.colorCustomizations": {
    "editorRuler.foreground": "#ff4081"
  },
  "vsicons.dontShowNewVersionMessage": true,
  "workbench.iconTheme": "vscode-icons",
  "git.ignoreMissingGitWarning": true,
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,
  "gitlens.advanced.messages": {
    "suppressLineUncommittedWarning": true
  },
  // 终端设置
  // window 命令行
  "terminal.integrated.profiles.windows": {
    "PowerShell -NoProfile": {
      "source": "PowerShell",
      "args": ["-NoProfile"]
    }
  },
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.profiles.osx": {
    "zsh (x86-64)": {
      "path": "arch",
      "args": ["-x86_64", "/bin/zsh"]
    }
  },
  // "/bin/zsh",
  "terminal.explorerKind": "external",
  "terminal.external.osxExec": "iTerm.app", // mac 外部终端
  "terminal.integrated.automationShell.osx": "/bin/zsh",
  "terminal.integrated.copyOnSelection": true,
  "terminal.integrated.rightClickBehavior": "paste",
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.cursorBlinking": true,

  // 默认编码
  "files.defaultLanguage": "utf8",
  //文件自动编码
  "files.autoGuessEncoding": true,
  // 这些文件将不会显示在工作空间中
  "files.exclude": {
    "**/.classpath": true,
    "**/*.class": true,
    "**/.project": true,
    "**/.": true,
    "**/.settings": true,
    "**/.factorypath": true,
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/*.js": {
      "when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中
    },
    "**/node_modules": false
  },
  // 在使用搜索功能时,将这些文件夹/文件排除在外
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/target": true,
    "**/logs": true,
    "**/dist": true
  },
  "highlightLine.borderStyle": "solid",
  "highlightLine.borderWidth": "1px",
  "highlightLine.borderColor": "#C9ABA5",
  // colorize 扩展设置
  "colorize.languages": ["javascript", "javascriptreact", "typescript", "vue", "scss", "less", "css"],
  /* 文件说明注释  */
  "fileheader.customMade": {
    "Description": "",
    // "Hash": "不是路由组件",
    "Date": "Do not edit",
    "Author": "JackChou",
    "LastEditTime": "Do not edit",
    "LastEditors": "JackChou"
  },
  "fileheader.cursorMode": {
    "param": "",
    // "return": "",
    "Author": "JackChou"
  },
  "fileheader.configObj": {
    "autoAdd": false,
    "wideSame": true, // 等宽
    "wideNum": 12, // 字段长度 默认为13
    "CheckFileChange": true, //  只有文件头改变,回滚到最新版
    // "autoAddLine": 100,
    "prohibitAutoAdd": ["json", "md", "less"], //  禁止.json .md 文件,自动添加头部注释
    "dateFormat": "YYYY-MM-DD HH:mm:ss ZZ" // 日期格式 输出:2019-05-20 15:42:07 +0800
  },

  /* todo-tree settings */
  // "todo-tree.regex.regex": "((//|#|<!--|;|/\\*|^)\\s*($TAGS):|^\\s*- \\[ \\])", // 在文件中匹配 tag 的正则
  // "todo-tree.regex.regexCaseSensitive": false,//tag  是否大小写敏感
  "todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS)",
  "todo-tree.general.tags": ["TODO", "FIXME", "BUG", "NOTE", "DEL"],
  "todo-tree.highlights.defaultHighlight": {
    // 默认 tag 设置
    "background": "#f9f9fb", //"peekViewResult.background", // 使用 // "yellow", // 标记的背景色
    "foreground": "yellow", // 标记前景色 (文字颜色)
    "icon": "check", // 使用的图标
    "rulerColour": "yellow", // 在右侧快速预览的颜色
    "type": "tag", // 在文件中如何高亮  tag:只高亮标签  text:标签和后面的文字  tag-and-comment:高亮注释和标签  text-and-comment:标签 文字和注释  line:标记的一行  whole-line:
    "iconColour": "#fff" // 左侧 todo tree  图标的颜色,没有设置,使用前景色
  },
  "todo-tree.highlights.customHighlight": {
    "BUG": {
      "background": "#D01F00", // 红色
      "foreground": "#f9f9fb",
      "icon": "bug", // 显示的 icon
      "rulerColor": "#D01F00", // 预览表标尺的颜色
      "iconColour": "#D01F00", // todo  树中图标颜色
      "gutterIcon": true // 是否在行号旁显示图标
    },
    "TODO": {
      "background": "#3399CC", // 蓝色
      "foreground": "#f9f9fb",
      "iconColour": "#3399CC",
      "icon": "checklist",
      "rulerLane": "full",
      "gutterIcon": true
    },
    "FIXME": {
      "background": "#FF9900", // 黄色
      "foreground": "#f9f9fb",
      "iconColour": "#FF9900",
      "icon": "alert", // 警告
      "gutterIcon": true,
      "type": "text" // 有文字部分(代码、tab、text), 后面的空白部分不高亮
    },
    "NOTE": {
      "background": "#f9f9fb",
      "foreground": "#000", // 黑色
      "icon": "note",
      // "type": "whole-line", // 整行高亮
      "rulerColour": "#D1BC15",
      "iconColour ": "white",
      "hideFromTree": true // 在  todo  树中隐藏
    },
    "DEL": {
      "background": "#FFC300",
      "foreground": "#000", // 黑色
      "icon": "eye",
      // "type": "whole-line", // 整行高亮
      "rulerColour": "#D1BC15",
      "iconColour ": "white"
    }
  },
  "todo-tree.tree.scanAtStartup": false,
  "todo-tree.general.statusBar": "tags", // 状态栏显示样式
  "emmet.showSuggestionsAsSnippets": true,
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  },
  // 默认格式化设置
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true
  },
  "[typescript]": {
    // "editor.defaultFormatter": "vscode.typescript-language-features" // 编辑器内置的格式化功能
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true
  },

  "typescript.format.enable": false,
  "typescript.preferences.quoteStyle": "single",
  // 模块变化后自动更新 import
  "typescript.updateImportsOnFileMove.enabled": "always",
  "javascript.format.enable": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "javascript.preferences.quoteStyle": "single",
  "javascript.format.semicolons": "remove",
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features",
    "editor.linkedEditing": true
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.formatOnSave": true,
    "editor.wordWrap": "on",
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    // 快速补全
    "editor.quickSuggestions": {
      "other": true,
      "comments": true,
      "strings": true
    },
    // 显示空格
    "editor.renderWhitespace": "boundary",
    // snippet 提示优先(看个人喜欢)
    "editor.snippetSuggestions": "top",
    "editor.tabCompletion": "on",
    // 使用 enter 接受提示
    "editor.acceptSuggestionOnEnter": "on"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.linkedEditing": true // 不生效,安装 auto rename tag 代替
  },
  "[jsx]": {
    "editor.linkedEditing": true // 不生效,安装 auto rename tag 代替
  },
  // 添加 vue 支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "reacttypescript",
    "reactjavascript",
    "html",
    "vue"
  ],
  "eslint.migration.2_x": "on",
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  // prettier 设置
  "prettier.useEditorConfig": true,
  "prettier.singleQuote": true,
  "prettier.jsxSingleQuote": true,
  "prettier.embeddedLanguageFormatting": "auto",
  "prettier.printWidth": 120,
  "prettier.semi": false,
  "prettier.arrowParens": "avoid",
  "prettier.proseWrap": "always",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.scriptInitialIndent": false,
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      // "wrap_attributes": "auto", // "force-aligned",
      // "wrap_attributes": "auto", // 在超出行长度时才对属性进行换行
      // "wrap_attributes": "force", // 对除第一个属性外的其他每个属性进行换行
      // "wrap_attributes": "force-aligned", // 第一个以外的属性换行对齐
      "wrap_attributes": "force-expand-multiline", // 所有属性强制换行对齐
      // "wrap_attributes": "force-multiline" // 超出规定长度,换行对齐
      // #vue 组件中html代码格式化样式
      "wrap_line_length": 120,
      "end_with_newline": false
    },
    "prettier": {
      "singleQuote": true,
      "semi": false,
      "arrowParens": "avoid",
      "html-whitespace-sensitivity": "ignore",
      "printWidth": 120, // 超过最大值换行
      "tabWidth": 2, // 缩进字节数
      "useTabs": false, // 缩进不使用tab,使用空格
      "proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器(如GitHub comment)而按照markdown文本样式进行折行
      // "bracketSpacing": true, // 在对象,数组括号与文字之间加空格 "{ foo: bar }"
      // "disableLanguages": [
      //   "vue"
      // ], // 不格式化vue文件,vue文件的格式化单独设置
      "endOfLine": "auto", // 结尾是 \n \r \n\r auto
      "eslintIntegration": true, //不让prettier使用eslint的代码格式进行校验
      "htmlWhitespaceSensitivity": "ignore",
      "ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
      // "jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行
      "jsxSingleQuote": true, // 在jsx中使用单引号代替双引号
      "parser": "babylon", // 格式化的解析器,默认是babylon
      "requireConfig": false, // Require a 'prettierconfig' to format prettier
      "stylelintIntegration": true, //不让prettier使用stylelint的代码格式进行校验
      "trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号(在ES5中加尾逗号)
      "tslintIntegration": true // 不让prettier使用tslint的代码格式进行校验
    }
  },
  // jest 配置
  "jest.autoRun": {
    "watch": true,
    // "onStartup": [
    //   "all-tests"
    // ]
    "onSave": "test-only"
  },
  "jestrunner.jestCommand": "npm run unit",
  "code-runner.executorMap": {
    "scheme": "chez --script"
  },
  // 格式化stylus, 需安装 Manta's Stylus Supremacy 插件
  "stylusSupremacy.insertColons": false, // 是否插入冒号
  "stylusSupremacy.insertSemicolons": false, // 是否插入分好
  "stylusSupremacy.insertBraces": false, // 是否插入大括号
  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
  "stylusSupremacy.insertNewLineAroundBlocks": false,
  "pxremUnit": 100,
  "cssrem.rootFontSize": 100,
  "copyOnSelect.trimStart": true,
  "vue-helper.quotes": "single",
  "scssFormatter.singleQuote": true,
  "autoimport.useSemiColon": false,
  "diffEditor.ignoreTrimWhitespace": false,
  "tabnine.experimentalAutoImports": true,
  "screencastMode.fontSize": 60,
  "liveServer.settings.NoBrowser": true,
  "liveServer.settings.CustomBrowser": "chrome",
  "extensions.autoCheckUpdates": false,
  "extensions.autoUpdate": false,
  "update.mode": "none",
  "liveServer.settings.donotShowInfoMsg": true,
  "[dart]": {
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.rulers": [80],
    "editor.selectionHighlight": false,
    "editor.suggest.snippetsPreventQuickSuggestions": false,
    "editor.suggestSelection": "first",
    "editor.tabCompletion": "onlySnippets",
    "editor.wordBasedSuggestions": false
  },
  "dart.openDevTools": "flutter",
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "search.followSymlinks": false,
  "dart.checkForSdkUpdates": false,
  "dart.allowAnalytics": false,
  "task.problemMatchers.neverPrompt": {
    "shell": true
  },
  "security.workspace.trust.untrustedFiles": "open",
  "code-runner.defaultLanguage": "typescripts",
  "java.configuration.maven.userSettings": "D:\\0maven\\apache-maven-3.5.2\\conf\\settings.xml",
  //Java 环境配置 end
  "java.jdt.ls.vmargs": "-noverify -Xmx1G -XX:+UseG1GC -XX:+UseStringDeduplication -javaagent:\"C:\\Users\\Administrator\\.vscode\\extensions\\gabrielbb.vscode-lombok-0.9.7/server/lombok.jar\" -Xbootclasspath/a:\"C:\\Users\\Administrator\\.vscode\\extensions\\gabrielbb.vscode-lombok-0.9.7/server/lombok.jar\"",
  "[java]": {
    "editor.defaultFormatter": "mwpb.java-prettier-formatter"
  },
  /* code spell checker */
  "cSpell.enableFiletypes": [".vue", ".ts", ".js"],
  "cSpell.userWords": [
    "Backtop",
    "Clilent",
    "DONOTE",
    "Deduplication",
    "Editcolumns",
    "Liskov",
    "NOAUTH",
    "Sider",
    "Submenu",
    "Tinymce",
    "Unmount",
    "Whitespaces",
    "Xbootclasspath",
    "Zilles",
    "adoptopenjdk",
    "antd",
    "autofetch",
    "brightfuture",
    "browserslist",
    "cakebrew",
    "chunkhash",
    "classpath",
    "codelyzer",
    "codemirror",
    "commitlint",
    "console.log",
    "craco",
    "cssrem",
    "devkit",
    "devtool",
    "docstrings",
    "dont",
    "drawio",
    "echarts",
    "eofline",
    "eqeqeq",
    "eslintt",
    "factorialize",
    "factorypath",
    "fileheader",
    "fira",
    "foler",
    "forin",
    "gabrielbb",
    "ghpages",
    "gitee",
    "gitlab",
    "hackernews",
    "hediet",
    "iconify",
    "jackchou",
    "jackchoumine",
    "jackzhoumine",
    "jasminewd",
    "javaagent",
    "jszip",
    "launchrocket",
    "lightgreen",
    "maxlength",
    "michelemelluso",
    "multiline",
    "nodesource",
    "nospace",
    "noverify",
    "npmignore",
    "nprogress",
    "onespace",
    "openjdk",
    "paren",
    "pbpaste",
    "plog",
    "plusplus",
    "portfinder",
    "precache",
    "prettierconfig",
    "prettierignore",
    "publickey",
    "pxrem",
    "qrcode",
    "simplemde",
    "singleline",
    "stylefmt",
    "stylelint",
    "sweetalert",
    "tasksfile",
    "todohighlight",
    "trcc",
    "typeof",
    "untap",
    "vetur",
    "vite",
    "vitejs",
    "vmargs",
    "vnode",
    "vsicons",
    "vsintellicode",
    "vuedx",
    "vueuse",
    "vuex",
    "webpack's",
    "zhou",
    "zmformtable",
    "zmformtableset",
    "zmgitlab"
  ],
  "hediet.vscode-drawio.local-storage": "eyIuZHJhd2lvLWNvbmZpZyI6IntcImxhbmd1YWdlXCI6XCJcIixcImN1c3RvbUZvbnRzXCI6W10sXCJsaWJyYXJpZXNcIjpcImdlbmVyYWw7YmFzaWNcIixcImN1c3RvbUxpYnJhcmllc1wiOltcIkwuc2NyYXRjaHBhZFwiXSxcInBsdWdpbnNcIjpbXSxcInJlY2VudENvbG9yc1wiOltcIjk5MDAwMFwiLFwiQ0MwMDAwXCIsXCIwMDAwMDBcIixcIkZGRkZGRlwiLFwiMUExQTFBXCJdLFwiZm9ybWF0V2lkdGhcIjpcIjI0MFwiLFwiY3JlYXRlVGFyZ2V0XCI6ZmFsc2UsXCJwYWdlRm9ybWF0XCI6e1wieFwiOjAsXCJ5XCI6MCxcIndpZHRoXCI6ODI3LFwiaGVpZ2h0XCI6MTE2OX0sXCJzZWFyY2hcIjp0cnVlLFwic2hvd1N0YXJ0U2NyZWVuXCI6dHJ1ZSxcImdyaWRDb2xvclwiOlwiI2QwZDBkMFwiLFwiZGFya0dyaWRDb2xvclwiOlwiIzZlNmU2ZVwiLFwiYXV0b3NhdmVcIjp0cnVlLFwicmVzaXplSW1hZ2VzXCI6bnVsbCxcIm9wZW5Db3VudGVyXCI6MCxcInZlcnNpb25cIjoxOCxcInVuaXRcIjoxLFwiaXNSdWxlck9uXCI6ZmFsc2UsXCJ1aVwiOlwiXCJ9In0="
}

常用扩展

  1. 通用的功能增强
bash
# 代码格式
Prettier
eslint
Alphabetical Sorter # 变量排序 优化代码排版

# 编辑器基础
code spell checker # 单词拼写检查
Chinese language # 简体中文界面
vscode-icons # 美丽的icon
Material Icon Theme # 主题
Image preview # 图片预览
Highlight Line # 编辑器当前行高亮
bracket pair colorize # 高亮匹配的() {} []
Todo Tree # todo
Easy Snippet # 快速生成代码片段,配合 https://snippet-generator.app/

koroFileHeader # 文件头自动生成
Documentation this # 快速注释
Duplicate action # 快速复制
DotENV # . 文件
Formatting Toggle # 启用关闭格式化

# git 相关
Git Graph
Git history
gitLens
gitignore

# 代码智能提示
Github Copilot
Tabnine
  1. 语言或者框架相关
bash
# html
Highlight Matching Tag # 高亮匹配的 tag
auto rename tag # 自动重命名结束 tag

# css
Colorize # 颜色值高亮 【推荐】
Color Highlight # 颜色值高亮

# vue
Vue Language Features (Volar) # vue 语法高亮

# ts
Paste JSON as Code # json to type
  1. 其他

Released under the MIT License.