下载加速

  1. 打开 Visual Studio Code 官网进行下载
  2. 打开下载管理,复制下载链接
  3. 将链接中的域名部分 az764295.vo.msecnd.net 替换为 vscode.cdn.azure.cn
Zsh
https://az764295.vo.msecnd.net/stable/abd2f3db4bdb28f9e95536dfa84d8479f1eb312d/VSCode-darwin-universal.zip
# 替换成这样
https://vscode.cdn.azure.cn/stable/abd2f3db4bdb28f9e95536dfa84d8479f1eb312d/VSCode-darwin-universal.zip

扩展推荐

点击插件 或在扩展商店搜索插件 ID 即可安装

主题推荐

插件名 插件ID 插件描述
Material Icon Theme PKief.material-icon-theme 图标美化
One Dark Pro zhuangtongfa.Material-theme 暗黑风格主题
background shalldie.background 自定义背景图

HTML相关

插件名 插件 ID 插件描述
Auto Close Tag formulahendry.auto-close-tag 自动添加 HTML / XML 关闭标签
Auto Rename Tag formulahendry.auto-rename-tag 自动重命名配对的 HTML / XML 标签
Highlight Matching Tag vincaslt.highlight-matching-tag Tag 高亮匹配标记

CSS相关

插件名 插件 ID 插件描述
Stylelint stylelint.vscode-stylelint CSS / LESS / SCSS 代码检查
Tailwind CSS IntelliSense bradlc.vscode-tailwindcss Tailwind CSS 智能提示
px to rem sainoba.px-to-rem px 和 rem 互相转换

语法支持与代码格式检查

插件名 插件 ID 插件描述
ESLint dbaeumer.vscode-eslint 将 ESLint 集成到 VSCode 中
Prettier - Code formatter esbenp.prettier-vscode 代码格式化
Code Spell Checker streetsidesoftware.code-spell-checker 代码拼写检查
Error Lens usernamehw.errorlens 突出显示代码错误和警告
Vue 3 Snippets hollowtree.vue-snippets 为 Vue2 和 Vue3 提供代码片段
Vue Language Features (Volar) Vue.volar Vue3 文件语法高亮、片段整理、错误检查、格式化
TypeScript Vue Plugin (Volar) Vue.vscode-typescript-vue-plugin 用于支持在 TS 中 import *.vue 文件
Vetur octref.vetur Vue2 文件语法高亮、片段整理、错误检查、格式化
DotENV IronGeek.vscode-env .env 文件键值字符串高亮和格式化
Sort package.json psioniq.psi-header 对 package.json 文件进行排序

开发体验提升

插件名 插件 ID 插件描述
GitLens — Git supercharged eamodio.gitlens 增强构建在 VSCode 中的 Git 功能
Live Server ritwickdey.LiveServer 启动具有实时重新加载功能的本地开发服务
Code Runner formulahendry.code-runner 运行代码段或代码文件
ES7 React/Redux/GraphQL/React-Native snippets dsznajder.es7react-js-snippets 提供 ES7 中的 JavaScript 和 React / Redux 片段
Pretty Typescript Errors yoavbls.pretty-ts-errors 使 TypeScript 错误更美观、更易于阅读
Auto Import steoates.autoimport 自动查找,解析并提供所有可用导入的代码
Import Cost wix.vscode-import-cost 在编辑器中显示导入/需要包的大小
Image preview kisstkondoros.vscode-gutter-preview 在行号边上、悬停时显示图像预览
Path Intellisense christian-kohler.path-intellisense 自动补全文件路径
npm Intellisense christian-kohler.npm-intellisense 自动补全导入语句中的 npm 模块
es6-string-html Tobermory.es6-string-html ES6 模板字符串高亮
Todo Tree Gruntfuggly.todo-tree 在树视图中显示 TODO FIXME 等注释标记
change-case wmaurer.change-case 改变选中的文本的大小写

配置文件

JSON
{
  // Theme Sitting
  "workbench.colorTheme": "One Dark Pro Darker",
  "workbench.iconTheme": "material-icon-theme",
  "material-icon-theme.opacity": 0.75,
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "name": "italic font",
        "scope": [
          "comment",
          "keyword",
          "storage",
          "keyword.control",
          "keyword.control.from",
          "keyword.control.flow",
          "keyword.operator.new",
          "keyword.control.import",
          "keyword.control.export",
          "keyword.control.default",
          "keyword.control.trycatch",
          "keyword.control.conditional",
          "storage.type",
          "storage.type.class",
          "storage.modifier.tsx",
          "storage.type.function",
          "storage.modifier.async",
          "variable.language",
          "variable.language.this",
          "variable.language.super",
          "meta.class",
          "meta.var.expr",
          "constant.language.null",
          "support.type.primitive",
          "entity.name.method.js",
          "entity.other.attribute-name",
          "punctuation.definition.comment",
          "text.html.basic entity.other.attribute-name",
          "tag.decorator.js entity.name.tag.js",
          "tag.decorator.js punctuation.definition.tag.js",
          "source.js constant.other.object.key.js string.unquoted.label.js"
        ],
        "settings": {
          "fontStyle": "italic"
        }
      }
    ]
  },
  // background icon
  "background.enabled": true,
  // auto close tag
  "auto-close-tag.enableAutoCloseTag": true,
  "auto-close-tag.enableAutoCloseSelfClosingTag": true,
  // auto rename tag
  "auto-rename-tag.activationOnLanguage": [
    "*"
  ],
  // styleLint 禁用内置 CSS、Less 和 SCSS linter
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  // tailwind Css
  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript",
    "*.vue": "vue",
    "*.env.*": "env"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  // px to rem
  "px-to-rem.px-per-rem": 16,
  // prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 是否每行末尾添加分号
  "prettier.semi": false,
  // 是否使用单引号
  "prettier.singleQuote": true,
  "prettier.printWidth": 100,
  "prettier.trailingComma": "none",
  // spell checker ignore
  "cSpell.userWords": [
    "applescript",
    "autohotkey",
    "autoit",
    "cscript",
    "esbenp",
    "escript",
    "gfortran",
    "haxe",
    "javac",
    "kitc",
    "lein",
    "lessc",
    "Linebreak",
    "Nologo",
    "osascript",
    "Rscript",
    "runghc",
    "rustc",
    "sbcl",
    "scriptcs",
    "spwn",
    "tailwindcss",
    "trycatch",
    "vbscript",
    "Vite"
  ],
  "editor.unicodeHighlight.nonBasicASCII": false,
  // code runner
  "code-runner.executorMap": {
    "javascript": "node",
    "java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
    "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "zig": "zig run",
    "cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "objective-c": "cd $dir && gcc -framework Cocoa $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "php": "php",
    "python": "python -u",
    "perl": "perl",
    "perl6": "perl6",
    "ruby": "ruby",
    "go": "go run",
    "lua": "lua",
    "groovy": "groovy",
    "powershell": "powershell -ExecutionPolicy ByPass -File",
    "bat": "cmd /c",
    "shellscript": "bash",
    "fsharp": "fsi",
    "csharp": "scriptcs",
    "vbscript": "cscript //Nologo",
    "typescript": "ts-node",
    "coffeescript": "coffee",
    "scala": "scala",
    "swift": "swift",
    "julia": "julia",
    "crystal": "crystal",
    "ocaml": "ocaml",
    "r": "Rscript",
    "applescript": "osascript",
    "clojure": "lein exec",
    "haxe": "haxe --cwd $dirWithoutTrailingSlash --run $fileNameWithoutExt",
    "rust": "cd $dir && rustc $fileName && $dir$fileNameWithoutExt",
    "racket": "racket",
    "scheme": "csi -script",
    "ahk": "autohotkey",
    "autoit": "autoit3",
    "dart": "dart",
    "pascal": "cd $dir && fpc $fileName && $dir$fileNameWithoutExt",
    "d": "cd $dir && dmd $fileName && $dir$fileNameWithoutExt",
    "haskell": "runghc",
    "nim": "nim compile --verbosity:0 --hints:off --run",
    "lisp": "sbcl --script",
    "kit": "kitc --run",
    "v": "v run",
    "sass": "sass --style expanded",
    "scss": "scss --style expanded",
    "less": "cd $dir && lessc $fileName $fileNameWithoutExt.css",
    "FortranFreeForm": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "fortran-modern": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "fortran_fixed-form": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "fortran": "cd $dir && gfortran $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
    "sml": "cd $dir && sml $fileName",
    "mojo": "mojo run",
    "erlang": "escript",
    "spwn": "spwn build",
    "pkl": "cd $dir && pkl eval -f yaml $fileName -o $fileNameWithoutExt.yaml",
    "gleam": "gleam run -m $fileNameWithoutExt"
  },
  "npm-intellisense.importES6": true,
  "npm-intellisense.importQuotes": "'",
  "npm-intellisense.importLinebreak": ";\r\n",
  "npm-intellisense.importDeclarationType": "const",
  /********** 编辑器相关 **********/
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.minimap.enabled": true,
  "editor.formatOnSave": true,
  "editor.unicodeHighlight.allowedLocales": {
    "zh-hans": true
  },
  /** 文件配置 */
  "files.eol": "\n",
  "files.exclude": {
    "**/.idea": true
  },
  "files.insertFinalNewline": true,
  "files.simpleDialog.enable": true,
  /** git 相关 */
  "git.ignoreMissingGitWarning": true,
  "git.autofetch": true,
  "git.untrackedChanges": "separate",
  /** eslint 配置 */
  "eslint.format.enable": true,
  "eslint.options": {
    "extensions": [
      ".js",
      ".jsx",
      ".ts",
      ".tsx",
      ".vue"
    ]
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "markdown",
    "json",
    "jsonc",
    "json5"
  ],
  /** errorLens 配置 */
  "errorLens.enabledDiagnosticLevels": [
    "warning",
    "error"
  ],
  "errorLens.excludeBySource": [
    "cSpell",
    "Grammarly",
    "eslint"
  ]
}