+
+
Posts List
  1. 前言
  2. 我和我的编辑器朋友们
  3. 调教VSCode
    1. 整容
    2. 赋能

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

前言

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

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

我和我的编辑器朋友们

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的。

整容

整容前:

整容后:

动了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
    括号配对插件,将不同对的括号以不同颜色呈现,妈妈再也不用担心我漏写括号了。

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

    settings.json
    1
    2
    3
    4
    5
    {
    "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
    {
    "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实时调试工具。

本文作者: rhinoc

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

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

打赏
Love U 3000
  • Through WeChat
  • Through Alipay