View Post on Blog

vscode-brand

这是一篇（尽量）新手向的文章，以 VSCode, Python, JavaScript (Vue) 为例，介绍编辑器的功能和配置。

当然，没说必须选择 VSCode，大可选择 JetBrains 那一套。但是由于笔者平日折腾跨越的语言、领域较多（且前端居多），VSCode 是更好的选择，故只对 VSCode 有少量研究。

鉴于部分同学不会配置 VSCode，也不知道一个编辑器应当怎么配置，导致代码不美观，包含大量低级错误等问题，故有必要说明。

简单而言，一个代码编辑器应当具有的功能，即区别于自带记事本等的特性包括：

  • 高颜值 (Awesome Theme)
  • 语法高亮 (Syntax Highlighting)
  • 智能补全 (Auto Completion, IntelliSense)
  • 代码格式化 (Formatting)
  • 代码检查 (Linting)
  • 自动缩进 (Auto Indentation)
  • 快速编辑，如各种快捷键 (Keyboard Shortcut) 和代码片段 (Code Snippets)
  • 代码浏览 (Code Browsing)
  • 调试 (Debugging)
  • 其他集成 (Integration)

为什么选择 VSCode

可参考 https://code.visualstudio.com/Docs/editor/whyvscode

基于插件 (Extension) 的模式

与 JetBrains (IntelliJ IDEA, PyCharm, WebStorm, PhpStorm, CLion…) 等编辑器不同的是，VSCode 是为了支持各种语言而生的，只要安装对应的插件，但是支持程度得看相应插件的水平了。与 VSCode 相类似的还有 Sublime Text, Vim, Atom, Emacs 等。

比如，Python 就有 Python 插件（对，就叫这名），Vue 就有 Vetur，Docker 就有 Docker…

当然，一些语言 (C / C++, JavaScript, JSON, CSS…) 的插件已经随 VSCode 默认安装，就像手机出厂的时候就不是一块板砖。具体列表可以在侧边栏扩展 (Extensions) 标签页下，输入 @builtin 查看。如果自带的插件功能上没有欠缺的话，就不必另行安装插件。

大家的选择
语言来源第一名第二名第三名第四名第五名
PythonPython Developers Survey 2019PyCharm
33%		VSCode
24%		Vim
9%		Sublime Text
6%		Jupyter NoteBook
5%
JavaScriptState of JS 2020VSCode
86%		Vim
20%		WebStorm
18.5%		SublimeText
12.3%		Notepad++
8.2%
GoGo Developer Survey 2019VSCode
41%		GoLand / IntelliJ
34%		Vim
14%		Emacs
4%		Sublime Text
2%
C++The State of Developer Ecosystem in 2020Visual Studio
26%		Clion
22%		VSCode
22%		Vim
7%		QtCreator
4%
JavaThe State of Developer Ecosystem in 2020IntelliJ IDEA
72%		Eclipse
13%		Android Studio
6%		VSCode
4%		NetBeans
3%
RustThe State of Developer Ecosystem in 2020VSCode
41%		CLion
22%		IntelliJ IDEA
16%		Vim
11%		Emacs
3%

注：JetBrains 主导的调查是不是存在护犊子的情况就不得而知了

其实在这些调查结果中也可以看到，JetBrains 的编辑器也不止是可以支持一种语言，但相比 VSCode 而言还是更加专一门。

所以说在这些流行的语言中，尤其是新兴的语言中，VSCode 地位还是很靠前的。

上手 VSCode

菜单 Help -> Interactive Playground

菜单 Help -> Tips and Tricks

高颜值 / 好看的主题 (Awesome Theme)

主题 (Theme) 一般是一种配色方案。在 VSCode 下，主题可以是传统意义上的配色主题，也可指图标主题，即 VSCode 中涉及文件的视图，文件（夹）名前面的图标。

已经安装的主题可以通过快捷键 Ctrl + K Ctrl + T 查看和切换。同时，在扩展 (Extensions) 标签页下，输入 @category:"themes" 可以查找所有的主题。而 https://vscodethemes.com/ 也提供了不同主题的预览，更加便于发现好主题。

此处安利 One Dark

语法高亮 (Syntax Highlighting)

谁也不想打开一段代码像记事本一样通篇一个颜色，不分主次、不分类别，看上去很吃力。

要启用也很简单，只要安装了对应语言 / 框架的插件即可。有的语言甚至默认就支持。语法高亮的实现原理上也很简单，直接正则表达式匹配就能有不错的结果，当然也可以通过各种分析对变量、函数、类进行不同的高亮。

当然也有一些专做语法高亮的插件，比如 Rainbow CSV, MagicPython 等等。

需要注意的是语法高亮只负责标记不同部分，这些部分显示什么颜色还是要看主题。

智能补全 (Auto Completion, IntelliSense)

普通的变量名补全，可以让你少打几个字，让编辑器完成剩下的，不仅可以加快速度，让你从琐碎的劳动中解脱出来，还可以让你不再因为打字麻烦而不规范地命名变量和函数名称。

就像使用拼音输入法，用久了之后谁也不想每个字都拼出来才能把词语打出吧。手机上的输入法还会根据前面的输入建议接下来的词语，或者调整下一个拼音中不同候选词的位置，（不管人工智能还是人工智障，总之）提供了很大的便利。

同时，在变量和函数的补全中，也省去了许多（不是全部）查阅文档的工作，也避免了变量名和函数名打错的情况。比如在码了多年 Python 和多年 JavaScript 之后，分不清 .startsWith, .starts_with, .startswith, 自动补全可以省去因记不清每次都上网查文档的烦恼。又比如有的时候 team work，由于习惯一直以为队友打的是过去式 created_blahblah, 但是实际上是 create_blahblah, 这时使用智能补全可以很好的避免变量误写。在下面的代码检查中可以看到另一种避免方式，但是它对一些 dynamic 的语言， implicit 的写法，（比如 SQLAlchemy，）也几乎束手无策。

与语法高亮类似，补全功能也基本都集成在插件当中。一般情况下在你输入的时候就会出现提示，如果不出现，可以通过 Ctrl + Space 唤出。实现上一般是通过后台开一个语言服务器 (Language Server), 通过协议 (Language Server Protocol, LSP) 与编辑器前端通讯，由服务器负责分析代码，给出建议。比如 Python 的语言服务器有 Jedi, Pylance, 而 JavaScript / TypeScript 有 TSServer, 虽然 Vue 只是一个框架，也有 VLS (Vue Language Server).

注意对于 Python，如果要对虚拟环境里的库进行补全，则必须要配置 Python 的解释器路径。Ctrl + Shift + P 显示命令菜单，输入 Python: Select Interpreter 设置正确的解释器路径。

代码格式化 (Formatting)

在解释格式化之前，应当解释什么是代码风格 (Code Style). 代码风格就是代码看起来长什么样，拆开来说，何时使用空格，何时换行，如何缩进，左大括号是否另起一行，有多种写法时选择哪一种，等等。那么代码格式化，就是将每个人写出来的代码规范为统一的格式。这在团队合作中显得更加重要，谁也不想代码乱成一锅粥，这个函数是这个风格，那个函数又是另外一个风格。

代码格式化的任务往往不是插件本身完成的，插件只是和现有的代码格式化工具 (Formatter) 集成。每个语言都有自己的格式化工具，比如 Python 的 Black, YAPF, 和 JavaScript 的 Prettier. 使用时只需快捷键 Shift + Alt + F 或右键菜单 -> Format Document( With…)

代码检查 (Linting)

代码检查一大功能就是在不运行你的代码的情况下，分析代码中存在的问题，或不符合最佳实践 (Best Practice) 的地方。与代码格式化类似，插件只是和现有的代码检查器 (Linter) 集成，比如根据 linter 的输出，在编辑器中有问题的地方显示红色黄色下划线。

但是有的代码检查器又兼具检查代码风格甚至代码格式化的功能，比如 Python 的 Flake8，JavaScript 的 ESLint 等。但是相比于专门的 formatter 来说，linter 的格式要求与格式化能力往往要弱一些。

编辑器的代码检查功能需要额外配置。比如 Python 需要 Ctrl + Shift + P 显示所有命令，输入 Python: Select Linter 选择 linter。对于 JavaScript 就要简单得多，在项目使用并且配置好 ESLint 的前提下，安装 ESLint 插件就可以进行检查。

以 ESLint 为例， getter-return (enforce return statements in getters) 就是发现错误，eqeqeq (require the use of === and !==) 就是最佳实践，no-mixed-spaces-and-tabs（disallow mixed spaces and tabs for indentation) 就是对格式的要求。

自动缩进 (Auto Indentation)

代码没有缩进就没有层次。自动缩进顾名思义就是减少手动调整缩进的繁琐。自动缩进对于 Python 来说比较重要。当然 Python 是对缩进敏感的，基础的自动缩进已经由 Python 插件完成了。但是根据 PEP8 的风格规范，Python 断行、括号内换行有特殊的规范，而 Python 插件对比如括号内回车换行的自动缩进并没有很好的支持，这时需要插件 Python Indent 的帮忙。

快捷键 (Keyboard Shortcut)

当前设置的快捷键可以通过 Ctrl + K Ctrl + S 查看。同时，VSCode 还很贴心的准备了快捷键的 Cheatsheet，一页 PDF：Ctrl + K Ctrl + R ，或菜单 Help -> Keyboard Shortcur Reference 即可打开。

同时，安装 keymap 类别的扩展可以在 VSCode 上轻松使用其他编辑器的快捷键。

代码片段 (Code Snippets)

写代码时有很多常用的、模板式的语句，比如 JavaScript 的：

try {
  // ...
} catch (error) {
  // ...
}

代码片段的功能就是帮你打完这些模板式的语句（块）。仍然以 try...catch 为例。在 JavaScript 代码中，输入 try，则会自动提示 trycatch，如果不出现，可以通过 Ctrl + Space 唤出。这时在建议菜单中选中 trycatch （点击、回车或 Tab），就会补全。具体可自行尝试。

其他的以后再说吧（逃

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue