vscode 使用推荐

# 为什么写这篇文章

在公司，只有我使用 VSCode，其他同事都使用 WebStorm，我也向他们推荐过 VSCode，他们虽然心动，但是觉得配置麻烦，不想花时间去学习。再者，经常看到各个微信群里问 VSCode 如何配置前端开发环境之类的问题，而掘金上的大部分文章只局限于推荐 VSCode 插件。天降大任于斯人也，那么就由我来向大家安利，并且配置一个舒适的前端开发环境。

# 写给谁？想从 WebStorm 转向 VSCode 的 F2E

大家都是 coder，编程语言没用高低之分，编辑器/IDE 也是，使用自己喜欢的即可。

# 为什么使用 VSCode

“微软有两种软件，一种是 VSCode，一种是其他”。微软最近这些年干的算人事的事情有两件（😄我觉得最大的两件），一件是 TypeScript 的推出，一件是 VSCode 的开源。

开源免费

这个相比于 WebStorm 好太多了，直接白嫖，也不用通过各种身份去申请免费版或者自费购买，属实良心好吧。
插件多（只有你想不到/找不到）

这个即是优点也是缺点。插件多，意味着自由性很高，可以按需安装自己想要的插件。但对于不熟悉 VSCode 的人来说，就是灾难。安装了不会用，插件之间有冲突等等。
轻量

VSCode 介于编辑器和 IDE 之间，比记事本/SubLime Text 强大，又没有 WebStorm 臃肿。

另外，尤大很早就推荐并且转向 VSCode 了

# 心动不？开始吧

本文章配合 mac 食用最佳

# 先滚去下载🐶

仙人指路 (opens new window)

# 来解决终端问题（让终端更好用/更好看）

windows 用户自求多福哈，不想使用 windows 的很大原因就是终端太难用（就算最近出了很多新的）

iTerm2

谁用谁知道，被推荐烂了，不多逼逼，iTerm2 (opens new window)
Oh My Zsh

有了 ta，你就可以安装自己想要的终端主题，官网傻瓜教程 (opens new window)

我用的是这款 (opens new window)

你可以看到当前 node 版本和 git 分支等等。

# 插件

推荐必装插件

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

不用解释
Auto Close Tag

自动闭合标签，比如你敲下<h1>，就会自动补上</h1>。
Auto Rename Tag

自动重命名标签，修改开始标签，结束标签也会自动修改。
One Dark Pro

我最喜欢的一款主题，很好看。
VSCode Great Icons

文件图标主题。

然后是一些工具性质的插件（按需）

Live Server

可以帮助你启动一个本地服务器，用不了的话安装 Previwe on Web Server 也行。右键编辑区即可看到 Open With Live Server，也可以弄个自己喜欢的快捷键。
Markdown Preview Enhanced

markdown 编辑，装就对了。
GitLens + Git Graph

GitLens 可以让你看到每一行的代码是谁写的，拒绝❌甩锅。Git Graph 可以让你看到图形化的 git 分支情况（点击左下角 Git Graph）。
Code Runner

可以运行各种代码。装了之后右上角有个运行标志。
Code Spell Checker

拼写不对的单词，会有波浪线提示。
TODO HighLight

高亮TODO:和FIXME:，配合注释使用哦～
Highlight Matching Tag

双击选中某个标签后，匹配所有相同标签，用于查找标签。
carbon-now-sh

生成好看的代码块图片。Alt+Cmd+Aor (Alt+Windows+Aon Windows)

代码片段插件

JavaScript (ES6) code snippets
ES7+ React/Redux/React-Native snippets
Vetur + Volar

vue2 使用前一个，vue3 使用后一个，不用哪个禁用哪个。
vscode-styled-components
any-rule

正则表达式大全，右键编辑区即可。

代码校验/格式化

ESLint + TSLint
Prettier

不推荐 Beautify（垃圾🌶️）

项目上常用插件

Version Lens

让你看到各个依赖的详细版本。点击右上角的V即可。
element-ui-helper
Remote - SSH + Remote - SSH: Editing Configuration Files

部署项目必备。这两个插件可以让你直接在 VSCode 打开远程服务器（你可以直接复制 VSCode 里的文件粘贴上去，或者直接在服务器上使用 VSCode 修改代码，也可以通过 VSCode 打开终端），什么 xshell、xftp、mob、finalshell、windterm、securecrt、tabby、自带终端...都弱爆了，给老子死🐶

# 配置

以下是我的 VSCode 配置，Command+Shift+Por (Ctrl+Shift+Pon Windows)打开 setting.json

我这里配置了保存后按照我想要的规则格式化

    {
      "files.autoSave": "off", // 自动保存
    
      "editor.formatOnSave": true, // 保存格式化
      "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认格式化程序
      "editor.fontSize": 16, // 字号
      "editor.tabSize": 2, // 一个tab强制转换为2个空格
      "editor.fontFamily": "Input Mono, Fira Code, monospace", // 字体
      "editor.smoothScrolling": true, // 滚动时启用动画
      "editor.renderWhitespace": "all", // 空白字符显示方式
      "editor.quickSuggestions": {
        "strings": true // 在键入字符串时启用建议
      },
      "editor.wordWrap": "on", // 在视区宽度处换行,
      "editor.bracketPairColorization.enabled": true, // 彩虹🌈括号
    
      "explorer.confirmDragAndDrop": true, // 控制在资源管理器内拖放移动文件或文件夹时是否进行确认
    
      "workbench.colorTheme": "One Dark Pro", // 主题
      "workbench.iconTheme": "vscode-great-icons", // 文件主题
      "workbench.tree.indent": 16, // 树缩进
    
      "terminal.integrated.defaultProfile.windows": "PowerShell", // 默认终端
      "terminal.integrated.defaultProfile.osx": "zsh", // 默认终端
      "terminal.integrated.copyOnSelection": true, // 终端选中复制
      // "terminal.integrated.fontSize": 16, // 终端字号
    
      "breadcrumbs.enabled": true, // 开启 vscode 文件路径导航
    
      "security.workspace.trust.untrustedFiles": "prompt", // 不显示信任引入提示
    
      // prettier 设置
      "prettier.semi": false, // 设置分号
      "prettier.singleQuote": true, // 强制单引号
      "prettier.trailingComma": "none", // 随时添加逗号
      "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      },
      "javascript.updateImportsOnFileMove.enabled": "always",
    
      // updated 2022-03-14 00:43
      // https://github.com/antfu/vscode-file-nesting-config
      // 配置文件归类
      "explorer.experimental.fileNesting.enabled": true,
      "explorer.experimental.fileNesting.expand": false,
      "explorer.experimental.fileNesting.patterns": {
        "*.js": "$(capture).js.map, $(capture).min.js, $(capture).d.ts",
        "*.jsx": "$(capture).js",
        "*.module.ts": "$(capture).resolver.ts, $(capture).controller.ts, $(capture).service.ts",
        "*.ts": "$(capture).js, $(capture).*.ts",
        "*.tsx": "$(capture).ts",
        "*.vue": "$(capture).*.ts, $(capture).*.js",
        ".env": "*.env, .env.*, env.d.ts",
        ".gitignore": ".gitattributes, .gitmodules, .gitmessage, .mailmap, .git-blame*",
        "index.d.ts": "*.d.ts",
        "package.json": ".browserslist*, .circleci*, .codecov, .commitlint*, .editorconfig, .eslint*, .firebase*, .flowconfig, .github*, .gitlab*, .gitpod*, .huskyrc*, .jslint*, .lintstagedrc*, .markdownlint*, .mocha*, .node-version, .nodemon*, .npm*, .nvmrc, .pm2*, .pnp.*, .pnpm*, .prettier*, .releaserc*, .sentry*, .stackblitz*, .styleci*, .stylelint*, .tazerc*, .textlint*, .tool-versions, .travis*, .vscode*, .watchman*, .xo-config*, .yamllint*, .yarnrc*, api-extractor.json, apollo.config.*, appveyor*, ava.config.*, azure-pipelines*, bower.json, build.config.*, commitlint*, crowdin*, cypress.json, dangerfile*, dprint.json, firebase.json, grunt*, gulp*, jasmine.*, jenkins*, jest.config.*, jsconfig.*, karma*, lerna*, lint-staged*, nest-cli.*, netlify*, nodemon*, nx.*, package-lock.json, playwright.config.*, pm2.*, pnpm*, prettier*, pullapprove*, puppeteer.config.*, renovate*, rollup.config.*, stylelint*, tsconfig.*, tsdoc.*, tslint*, tsup.config.*, turbo*, typedoc*, vercel*, vetur.config.*, vitest.config.*, webpack.config.*, workspace.json, xo.config.*, yarn*",
        "vite.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .htmlnanorc*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, cssnano.config.*, cypress.json, env.d.ts, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*",
        "vue.config.*": "*.env, .babelrc*, .codecov, .cssnanorc*, .env.*, .htmlnanorc*, .mocha*, .postcssrc*, .terserrc*, api-extractor.json, ava.config.*, babel.config.*, cssnano.config.*, cypress.json, env.d.ts, htmlnanorc.*, jasmine.*, jest.config.*, jsconfig.*, karma*, playwright.config.*, postcss.config.*, puppeteer.config.*, svgo.config.*, tailwind.config.*, tsdoc.*, unocss.config.*, vitest.config.*, webpack.config.*, windi.config.*"
      }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72