+
+

2020年我的编辑器选择+VSCode调教指南之前端版

前言

转眼就到了 2020 年的 2 月,新的一年的齿轮不知不觉已转过了$\frac{1}{12}$。因着这肆虐的疫情,每日虚度光阴浑浑噩噩似也不成罪过,而是保全生命的无奈之举。只是每当打开即时通讯应用,比赛、项目、春招又离我那么近。然后便感到当头一棒,这多出来的几日闲暇,带来的是往后更唐突地将我推向名为成长的战场。

矫情,这就是标题上带日期的副作用吧。

我和我的编辑器朋友们

@2x

2011 年,我收获第一台笔电,华硕某上网本。Windows 7 系统自带的记事本是我的第一个编辑器。

2013 年,我开始接触编程,也开始关注诸如异次元软件世界、小众软件等软件分享网站。那时候常用来替换记事本的编辑器有 Notepad++、UltraEdit 等,不过换来换去还是和记事本最像的 Notepad2 留了下来。轻量、类原生、麻雀虽小五脏俱全是我选择 Notepad2 的理由。另外,由于学习 C 语言看的学习视频里老师用的编辑器是 Sublime Text,当时觉得怎么会有这么好看的编辑器,瞬间种草就安装了。那时候 Sublime Text 还是第 2 版,虽然是付费软件但可以一直免费使用,安装下来第一件事就是换上 Seti 主题,颜狗没跑了。

2016 年,收获第二太笔电,联想扬天。此时 Github 发布的 Atom 已经日趋成熟,炫酷的 activate-power-mode 让我入了 Atom 的坑,颜狗的本质再次显现。

2018 年,鸟枪换炮新买了 MacBook Pro 2018,Windows 下的记事本换成 macOS 下的 TextEdit,不是很用得惯,幸好 Atom 还在。

2019 年,被 TextEdit 折磨得不要不要的我找到了 CotEditor,对我而言,CotEditor 就是 macOS 上的 Notepad2。

2020 年,Atom 的绝世美颜也拯救不了它的高占用、日常抽风等问题。而我又好巧不巧看了一篇调教 VSCode 的帖子,发现 VSCode 可以不那么丑后果断把 Atom 打入冷宫。怕 Atom 孤单,我又想起 CotEditor 最近开大文件总是卡死,而 Sublime Text 一直以来以快著称,所以又进行了一次替换。

调教 VSCode

从微软收购 Github,VSCode 上位成为 Github 亲儿子后我就知道总有一天我是要用 VSCode 的。

整容

整容前:
@2x

整容后:
@2x

动了 4 刀:

  1. 把 Side Bar 移到了右边,这样切换 Side Bar 时代码的位置不会移动
  2. 将图标主题换成了 seti,这个是从 Sublime Text 时代留下的老习惯
  3. 将 Color Theme 换成了 One Monokai
  4. 编辑器字体换成 JetBrains 新推出的 JetBrains Mono,字号 13,并开启 ligature
settings.json
1
2
3
4
5
6
7
8
9
10
11
12
{
"files.autoSave":"onWindowChange",
"editor.fontFamily":"JetBrains Mono, Cascadia Code, Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures":true,
"editor.renderControlCharacters":true,
"editor.renderWhitespace":"all",
"editor.fontSize":13,
"workbench.colorTheme":"One Monokai",
"workbench.startupEditor":"newUntitledFile",
"workbench.sideBar.location":"right",
"workbench.iconTheme":"seti"
}

赋能

  1. Bracket Pair Colorizer
    括号配对插件,将不同对的括号以不同颜色呈现,妈妈再也不用担心我漏写括号了。
    @2x

  2. Prettier
    代码格式化插件。相比内置的 formatter 具有更强的可定制性。

    settings.json
    1
    2
    3
    4
    5
    6
    {
    "editor.formatOnSave":true,
    "editor.formatOnPaste":true,
    "editor.defaultFormatter":"esbenp.prettier-vscode"
    }

  3. Auto Close Tag
    自动闭合 HTML/XML 的标签。

  4. Auto Rename Tag
    当修改一个标签名称时,自动修改与其配对的另一个标签。

  5. Debugger for Chrome
    让 VSCode 支持在 Chrome 中调试。配置教程参见VSCode 插件之 Debugger for Chrome
    贴一个常用配置:

    launch.json
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    {
    "version":"0.2.0",
    "configurations":[
    {
    "type":"chrome",
    "request":"launch",
    "name":"Debug Index",
    "url":"http://localhost:8080",
    "webRoot":"${workspaceFolder}",
    "file":"${workspaceFolder}/index.html"
    }
    ]
    }

  6. JavaScript (ES6) code snippets
    提供 JS 缩写支持,比如输入clg即可补全为console.log(object)
  7. HTML Snippets
    提供 HTML 缩写支持,比如输入a可补全为<a href=""></a>
  8. Quokka.js
    一个 JS 实时调试工具。

    @2x

本文作者: rhinoc

本文链接: https://www.rhinoc.top/vscode/

版权声明: 本博客所有文章除特别声明外,均采用BY-NC-SA 4.0国际许可协议,转载请注明。

打赏
Love U 3000
  • Through WeChat
  • Through Alipay
0%