{"componentChunkName":"component---src-templates-blog-post-js","path":"/vscode/","result":{"data":{"site":{"siteMetadata":{"title":"😏","author":"thoamsy"}},"markdownRemark":{"id":"f19f684c-3701-5ca7-8260-c4fac99f4bea","html":"

这篇文章主要是针对打算学习前端的小白，和想学点前端的后端大佬，为了提升你们的编码幸福感。

\n
\n

工欲善其功，必先利其器

\n
\n

简单介绍下背景，VSCode 是目前前端界最为流行的一款编辑器，每月一次的更新，强大的插件生态和 TypeScript 的整合，让这款编辑器瞬间风靡世界。像之前的 Sublime 和 GitHub 的 Atom，都无法与它抗衡。比如 Vue 的作者 Evan You 也是用它作为主力开发工具。

\n

准备工作

\n

第一步当然是下载 VSCode 并安装。Window 用户印象中还需要下载一个 Git 的工具，无论你知不知道的 Git，以及 Git 和 GitHub 的区别，反正去官网 下载好这个并安装。如果你在终端（命令行）中输入

\n
git --version
\n

会有一个版本号输出的话，就说明下载成功了。\n\n \n \n \n \n \n \n \n \n \nMac 用户只要安装过 Xcode 或者开发者工具套件的话，就内置了 Git 的功能。之所以要安装 git 是因为 VS Code 的插件基于 Git 的支持。

\n

接着还需要安装，node，yarn 英文不好的同学也不要管那么多，看到 Install, Download 这种单词就点，下版本最高的就行。Window 用户的 node 需要下载的是一个 .msi 文件不是 .exe 文件，msi 文件能给 Window 环境写入一个二进制文件，而 exe 仅仅是一个 node 的 REPL 环境。

\n
\n

因为作者本人对 Window 不够熟悉，很多描述是靠之前碰到过的坑，如果碰到问题的话，还请自己使用搜索引擎解决

\n
\n

还是和之前一样，输入几个命令测试是否安装成功。

\n
node -v\nyarn why
\n

在这两个都确定安装好后，继续输入

\n
yarn global add eslint
\n

Window 用户如果 Yarn 没有安装成功的话，就使用 npm 安装作为 B 计划

\n
npm install -g eslint
\n

安装好后，就会有打印出安装成功的 eslint 版本。eslint 是一个 JS 的静态分析器，它可以解决一些写 JS 经常遇到的问题：

\n
    \n
  1. 变量名写错了，但是没有报错。
    2. \n
  2. 自己不想写分号，让它自动加
    3. \n
  3. 强制要求格式的规范
    4. \n
  4. 等等
    5. \n
\n

还有 TypeScript 这是微软开发的一个 JS 超集，安装它的目的主要是它能够为 VS Code 赋予更强的能力，让开发更爽。设置里面会有很多功能性开关，需要安装了指定版本的 typescript 才可以，所以我们安装最新的就是了。

\n
yarn global add typescript\n// or\nnpm install -g typescript
\n

和上面一样，如果 yarn 没安装成功的话就是用 npm。在本文写作的时候，typescript 的版本为 2.9.1\n接下来就进入 VSCode 的流程。

\n
\n

最基本的 VSCode 的侧边栏有五项\n\n \n \n \n \n \n \n \n \n \n其中第五个就是安装插件的一个 Tab，点开来，选择常用的拓展，就能看到根据安装量排序的拓展工具。\n\n \n \n \n \n \n \n \n \n \n如果真的想要好好运用 VSCode 的话，还是要自己多花费点时间在这些拓展上，找出几个真正适合你的。

\n

美化一下

\n

默认的 VSCode 还是蛮丑的，特别是底部蓝色的状态栏。显然需要美化一下, 从三个方面着手

\n
    \n
  1. 字体
    2. \n
  2. 主题
    3. \n
  3. 文件图标
    4. \n
\n

字体

\n

选一个好看的字体还是挺重要的，如果每天面对 Window 的 cmd 那种字体的话，写程序一定会十分痛苦。目前广受好评的一个开源字体是，Fira Code, 好看是一方面，还支持一个特别神奇的 font ligatures 功能，它的效果就是能将你输入的一些特定的符号组合，换成另外一个更为写实风格的符号。比如我们常用的 != 最后就长得和 ≠ 一样。 \n \n \n \n \n \n \n

\n

通过 GitHub 下载好字体文件后，安装到系统上。安装好后，进入 VSCode 的设置，设置 editor.fontLigatures 为 true，在 editor.fontFamily 的最前面加上 'Fira Code'，保存一下，去看看效果吧！

\n

主题

\n

2 和 3 就不需要这些步骤了，通过按住 Cmd/Ctrl，接着看 K 和 T 两个键，就可以选择其他主题。不过自带的主题如果不过瘾的话，还可以下载其他主题，推荐安装一个 Dracula

\n

而文件图标的效果就是让你的文件或者文件夹有一个小图标，提供辨识度。像这样 \n \n \n \n \n \n \n \n \n \n这个功能隐藏的比较深，需要直接去设置。按 F1，输入 File Icon Theme 就能找到，官方也提供了几个主题，但是不怎么全，也不是那么好看。本人推荐 Material Icon Theme

\n

有了好看的编辑器，才有动力写出好看的代码。

\n

安装插件

\n

先看看，需要配置的插件

\n

ESLint

\n

现在没有 ESLint 已经没法写 JS 代码了，我们不需要花太多时间在找自己的拼写错误导致的 bug 上。下载 VSCode 的 ESLint 插件后，重载 VSCode，打开设置，搜索 eslint。\n\n \n \n \n \n \n \n \n \n \n这里主要需要修改的几个配置。

\n\n

eslint 通过一个规则文件驱动，可以叫做 .eslintrc, .eslintrc.json, .eslintrc.js 等等，刚开始的时候，你可能不知道 eslint 有哪些规则，这该怎么办？我们可以使用 eslint 默认的设置，来入门。

\n
eslint --init
\n

接着会需要你回答一些和偏好有关的问题

\n
How would you like to configure ESLint?\n> Answer questions about your style\n  Use a popular style guide\n  Inspect your JavaScript file(s)
\n

类似于这样的问题。用方向键控制，回车来确定。最简单的方式是：

\n
    \n
  1. Answer questions about your style
    2. \n
  2. y
    3. \n
  3. y
    4. \n
  4. 这个问题是根据你是在浏览器还是在 node 上
    5. \n
  5. 这个问题是问你是否使用 CommonJS，如果不写 node 的话，选择 N
    6. \n
  6. Do you use JSX? 写 React 的话，就选 y
    7. \n
  7. Spaces
    8. \n
  8. Single
    9. \n
  9. 根据电脑系统选择换行的组成。LF/CRLF
    10. \n
  10. y
    11. \n
  11. JSON\n根据我这个配置会生成如下配置代码
    12. \n
\n
{\n  \"env\": {\n    \"browser\": true,\n    \"es6\": true\n  },\n  \"extends\": \"eslint:recommended\",\n  \"parserOptions\": {\n    \"sourceType\": \"module\"\n  },\n  \"rules\": {\n    \"indent\": [\"error\", 4],\n    \"linebreak-style\": [\"error\", \"unix\"],\n    \"quotes\": [\"error\", \"single\"],\n    \"semi\": [\"error\", \"always\"]\n  }\n}
\n

注意 indent 这个 key，根据你的偏好来调整数字。4 表示的是 4 个空格。接着根据这个配置文件，eslint 就能发挥作用了。\n\n \n \n \n \n \n \n \n \n \n像我这个代码就有很多波浪线出现，就是因为 eslint 在抗议了。第一个错误和第三个错误是因为我们在设置的时候没有选择 commonJS 导致的。console.log 下面会有波浪线是因为 eslint:recommended 的默认配置里，包含了一个选项\nno-console: error，意思就是语句中不能出现 console，否则就是 error（error 还是 warn 决定了能够成功编译文件，出现了 error 就不行）。调整的方法也很简单，在 rules 中添加一句 no-console: 'off' 来覆盖这个设置就行。

\n

Code Runner

\n

\n \n \n \n \n \n \n \n \n \n这个插件的功能是通过调用的系统的二进制文件，来直接运行代码，类似于 IDE 中的编译运行。不过在真正使用之前还需要稍微配置一下，在用户设置中搜索，code-runner，可以看到搜索出来的结果。\n\n \n \n \n \n \n \n \n \n \n有很多的配置，可能很让人头大，但是先别慌，找几个我们要用的就行。

\n\n

第一个的意思就是每次运行会清楚之前的输入，看个人喜好吧，我是觉得清楚一下会更好。第二个就是在自己系统的终端中运行这个，好处是可以直接打通我们心爱的终端，而且如果不配置这个的话，Window 会出现一些奇怪的问题，强烈推荐。

\n

第三个的意思是，运行之前保存当前文件和运行之前保存所有文件，自己选择一个设置为 True 就行。为什么需要这个？因为我们经常会碰到写完代码就去运行，但是发现自己忘记保存的情况，结果还是之前的结果。JS 的通过 node 来运行的，在我们安装后这个插件并重启后，新建一个 js 文件。比如像我下面是一个生成 HTML 模板的代码,

\n
const template = (title, content) => `\n  <section>\n\t<h1>${title}</h1>\n\t<article>${content}</article>\n  </section>\n`;\n\nconst config = [\n  { title: 'I can run js', article: 'Very Cool!' },\n  { title: 'I can run everything', article: 'Really Cool!' },\n];\n\nconst theHtml = config\n  .map(({ title, content }) => template(title, content))\n  .join('\\n');\n\nconsole.log(theHtml);
\n

之后点击右上角的的这个播放键\n\n \n \n \n \n \n \n \n \n \n就能看到 console.log 的结果被打印出来。\n\n \n \n \n \n \n \n \n \n

\n

Code Runner 不仅仅支持 JS。我们需要这个功能可能是为了学习新语法，也可能是测试某个算法。显然使用 node REPL 或者在浏览器的 console 里写一大串代码是一个很愚蠢的行为。

\n

Prettier

\n

这个是最近一年最火的格式化工具，能够将你写成 💩 一样的 JS 也能格式成十分漂亮的代码（前提是没有语法没错）。同时也支持 HTML，CSS，JSON，Markdown 等等文件。\n\n \n \n \n \n \n \n \n \n \n为了体现它的强大，我们需要去改一些配置。和之前一样，在设置中搜索 format，找到

\n\n

解释已经有中文了，全部设置为 true 就行。至于开启它们的效果，只能自己去好好体会了。写一点缩进比较烂的代码，接着保存，所有的代码就被格式化了。

\n
\n

不需要配置的插件

\n

Bracket Pair Colorizer

\n

如果仅仅看它的介绍的话，这个插件是一个会将你的 ([{}]) 这些使用不同的颜色区分出来，提升鉴别度。\n\n \n \n \n \n \n \n \n \n \n可以看到这些括号都是彩色的。当然如果仅仅只是这么一个花哨的功能的话，对编码幸福感提升不大。其实我最看重的是它的范围高亮功能，嗯这个名字是我乱取的。就像这样：\n\n \n \n \n \n \n \n \n \n \n注意到了吗，这对 [] 之间是一条折线，来表明这个括号所表示的范围。这个功能在较长代码和嵌套的时候，特别有用。

\n

Auto Close Tag

\n

\n \n \n \n \n \n \n \n \n

\n

这个不解释了，就是自动帮你填充对应的 Tag。如果你对 emmet 用的很熟练的话，这个插件可能出场率不高。

\n

Auto Rename Tag

\n

\n \n \n \n \n \n \n \n \n

\n

和上面一个算是兄弟插件吧。嗯，作者也是同一个人。作用很明显，自动帮你改对应的 tag！同样的，如果你的结构比较复杂的话，这个还是会有点小 bug 的话，不过在时间的节省上，这个插件显然是必装的。emmet 也提供了这个功能，搜索 emmet: update tag，这个功能的稳定性应该会高于这个插件，但是要主动去设置快捷键。

\n

HTML CSS Support

\n

\n \n \n \n \n \n \n \n \n

\n

刚写前端的时候，或者为了方便，我们偶尔会把 CSS 写在 HTML 里，但是那样的话是没有直接创建 .css 文件强大的自动补全特性的，这个插件让一切都回来了。

\n

Settings Sync

\n

\n \n \n \n \n \n \n \n \n

\n

同步你在 VSCode 中的所有设置和下载过的插件，Snippet，快捷键绑定。对于有多台电脑的朋友，这个插件是必备的。不过它是基于 gist 来保存你的配置，而这个在国内需要翻墙… 同时这个插件第一次设置的也比较繁琐，需要一定的耐心。总的来说，当你必须换一台电脑的时候，一定要花点时间到这个插件上。可以节省你大量的时间！

\n

Path Intellisense

\n

\n \n \n \n \n \n \n \n \n

\n

提供 URL 的自动补全功能，这个必须装吧。支持任何语言，触发条件一般是在一对引号中，输入 ./ ，../, / 这些表示路径的前缀，就会跳出来了。像我们的 JS，HTML 中引用文件，CSS 中 url 就再也不用担心了。\n\n \n \n \n \n \n \n \n \n

\n

CSS Peak

\n

\n \n \n \n \n \n \n \n \n

\n

这插件的功能就是在我们看到 HTML 或者 JSX 等代码中，如果出现了 class/className 的话，可以通过 Cmd/Ctrl ➕ 左键点击某个 class 直接跳转到对应 CSS 的定义。非常方便，但是并不是每个时候都有用

\n

Live Server

\n

\n \n \n \n \n \n \n \n \n

\n

这是一个神器，如果你还不会使用 webpack 或者 parcel 的话。它提供了自动保存文件后自动刷新的功能。虽然这个功能看上去并不是很起眼，和 browser-sync 似乎也差不多，但它能内置到 VSCode 中就大大简化了操作。

\n

对于刚写前端的朋友有一个很重要的问题，他们往往喜欢直接通过浏览器打开某个 HTML 文件，在浏览器顶部会显示这个 URL 是 file 开头的。file 也算是一个协议，和我们知道的 HTTP 协议一样。如果直接通过 file 来打开 HTML 的话，很多 JS 的功能是不能实现的。比如：

\n
    \n
  1. Web Worker
    2. \n
  2. Service Worker
    3. \n
  3. <script type="module" src=""></script>
    4. \n
  4. cors
    5. \n
\n

通过使用这个插件，就再也不用担心这个问题。使用方式也很简单，安装好后，点击需要的启动的 HTML 文件中底部 tab 的

\n

\n \n \n \n \n \n \n \n \n

\n

在短暂的等待后，就会自动打开你的默认浏览器跳入由该插件启动的服务器。

\n

\n \n \n \n \n \n \n \n \n

\n

下次要进去的话，可以直接通过 localhost:5500进去。值得一提的是，这个插件仅仅只是一个很方便的功能，但不代表它很强大。需要更强大的开发流程还是需要考虑 parcel 或者 webpack。

\n

更多

\n

如果还想继续提升开发的幸福感，可以考虑学习

\n
    \n
  1. Emmet
    2. \n
  2. VSCode 文档
    3. \n
\n

谢谢阅读 🌚

","frontmatter":{"title":"使用 VSCode 搭建一个很爽的前端环境","spoiler":null,"image":null,"date":"2018/06/04"}}},"pageContext":{"slug":"/vscode/","previous":{"fields":{"slug":"/purecomponent-is-harmful/purecomponent-is-harmful/"},"frontmatter":{"title":"PureComponent Considered Harmful","image":null,"spoiler":"不要让所有的组件都是 PureComponent 或者 memo"}},"next":{"fields":{"slug":"/git/"},"frontmatter":{"title":"The Junior Git","image":null,"spoiler":null}}}}}