vscode 快速入门

vscode 快速入门

本篇主要讲解 vscode 使用中的一些经验：

  • 配置 vue 开发环境 - Vetur+ESLint+Prettier
  • 代码片段的使用
  • 常用插件
  • 如何完全卸载 vscode
  • 通过命令行启动 vscode
  • 编辑器的快捷键

注：笔者使用的 vscode 是 1.58.0，windows。由于版本的不同，而且 vscode 的配置也会改变，所以笔者尽量通过界面去操作，而不是直接修改 settings.json。

安装

官网下载，一路 next 即可。

Tip: 如果官网下载很慢或不能下载，可以去”腾讯软件中心“搜索 vscode 进行下载。

卸载

主要提一下如何完全卸载 vscode。

首先在控制面板卸载 vscode，再次重装，发现插件都还在。

再次通过控制面板卸载，并删除 .vscode 文件夹，但配置还在。

Tip: 我的 .vscode 目录是 C:\Users\xxx\.vscode，里面有 argv.json、extensions。

再次卸载，然后删除 C:\Users\xxx\AppData\Roaming\Code，重装后，终于回到最初状态。

启动

这里主要讲一下通过命令行启动 vscode。

首先在任意目录中查看版本，如果不能识别 code 则需要配置环境变量：

> code -v
1.58.0
940b5f4bb5fa47866a54529ed759d95d09ee80be
x64

启动 vscode：

// 在任意目录中输入 code 即可启动 vscode
D:\> code

// 使用 vscode 打开项目或目录（Users）
D:\> code Users

汉化

vscode 打开后界面是英文，可以将其汉化，操作十分简单。

点击 extensions（扩展）- 笔者的版本在左侧从上到下第 5 个图标，在输入框中输入要下载的插件，这里输入 chinese，选择中文（简体），点击安装，重启即可。

Tip: 下文功能介绍的名称都是汉化后的，比如点击扩展，而不是点击 extensions。

编辑器界面介绍

界面左侧从上到下有：

  1. 资源管理器
  2. 搜索
  3. 源代码管理
  4. 运行和调试
  5. 扩展
  6. 账号
  7. 管理

界面顶部从左到右有：

  1. 文件
  2. 编辑
  3. 选择
  4. 查看
  5. 转到
  6. 运行
  7. 终端
  8. 帮助

设置

设置，能在这里对 vscode 做设置，功能很强大。

下面我稍微介绍一下。

首先通过管理 -> 设置，即可打开设置。通过 ctrl + , 也可快速打开。

Tip：vscode 中有关插件比较复杂的部分就是配置，相关部分就是这里。

注：修改配置，有时需要重启 vscode 才会生效

format on save

我们编写 javascript 时，希望保存时能格式化一下代码，比如去除下面的连续空格：

// 等号右侧太多空格
let a =    "3"  ;

进入设置，在”搜索设置“的输入框中输入format on save，在查询出来的内容中，把”Format On Save“勾选上。

Tip：在设置界面的右上角，有个图标，鼠标移上去会显示”打开设置（json）“，点击该图标，则会打开 setting.json，最开始是一个空对象，当我们勾选”Format On Save“，该 json 也会同步，就像这样：

{
 "editor.formatOnSave": true
}

而当我们将 ”editor.formatOnSave“ 属性删除，则也会同步到界面。

回到 js 文件，ctrl + s保存，则会被格式化，就像这样：

let a = "3";

font size

想将文字调大，看的清晰一些。除了在”搜索设置“中输入”font size“快速查找出相应配置，还可以通过左侧导航（文本编辑器 -> 字体）找到“Editor: Font Size”，将 14 改为其他字号即可。

其他配置

剩余配置请根据需要自行研究和配置，提供的完整功有：

  • 常用设置
  • 文本编辑器
  • 工作台
  • 窗口
  • 功能
  • 应用程序
  • 扩展。从中我们知道 vscode 自带的有 markdown、git、emmet等，后续我们安装的 eslint、vetur 也会出现在这里。

终端

笔者安装完 vscode，在 vscode 的终端中发现集成了两种：powershell 和 cmd。

注：笔者曾在 powershell 中全局安装淘宝镜像，之后运行 cnpm -v 来检测 cnpm 是否安装成功，结果报错，后来换一个终端（gitbash）再次检测，结果显示 cnpm 安装成功。

// 全局安装淘宝镜像
> npm i -g cnpm --registry=https://registry.npm.taobao.org

// 检测 cnpm 是否安装成功
> cnpm -v
无法加载文件 ....\AppData\Roaming\npm\cnpm.ps1，因为在此系统中禁止执行脚本。有关详细信息，请参阅 "get-help about_signing"。
所在位置 行:1 字符: 5
+ cnpm <<<<  -v
    + CategoryInfo          : NotSpecified: (:) [], PSSecurityException
    + FullyQualifiedErrorId : RuntimeException

代码片段

比如我经常需要输入一些重复的代码，就可以给其创建一个代码片段，然后起个名字，当我输入这个名字，vscode 就会有相应的提示，只需要选中即可。

我们来体验一下。

选择“系统 -> 用户代码片段” 创建一个全局代码片段，会生成一份文件：

{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}

这里有一个例子，将“Example”下面的代码放开，就创建了一个代码片段。
然后在 js（scope 指定该片段的使用范围） 文件中输入 log（即 prefix 指定的字符），就会出现提示，选中我们的代码片段即可：

// 在 js 文件中输入：
log

// 选中代码片段，生成如下代码：
console.log('');

片段分析：

  • Print to console，代码片段名称
  • prefix，插件前缀
  • body，插件内容可以是字符串，也可以为数组，若为数组每个元素都做为单独的一行插入。
  • description，插件描述

示例

每个片段都并具有范围、前缀、正文和描述：

  • 范围通过逗号分隔，如果范围未定义则用于所有语言。
  • 前缀，用于触发代码片段。
  • $0 用于光标最终位置
  • $1、$2 等用于 tab 停止的地方

新建如下几个代码片段供参考：

{
	"cd": {
		"prefix": "cd",
		"body": [
			"```javascript",
			"$1",
			"```",
			"",
			"$0"
		],
		"description": "markdown code"
	},
	"function": {
		"prefix": "fun 新建方法",
		"body": "function ${1:name}() {${2}}",
		"description": "方法"
	},
	"import": {
		"prefix": "imp 导入资源",
		"body": "import {$1} from '$2';",
		"description": "导入"
	},
	"vue": {
		"scope": "vue",
		"prefix": "vue 单页面组件",
		"body": [
			"<template>",
			"    <div>\n",
			"    </div>",
			"</template>\n",
			"<script>",
			"export default {",
			"    data() {",
			"        return {\n",
			"        };",
			"    },",
			"    created() {\n",
			"    },",
			"    mounted() {\n",
			"    },",
			"    methods: {\n",
			"    }",
			"};",
			"</script>\n",
			"<style scoped lang=\"${1:less}\">\n",
			"</style>\n",
		],
	},
	"module desc": {
		"prefix": "module desc",
		"body": [
			"/**",
			"* @module ${TM_FILENAME_BASE}",
			"* @author: ph",
			"* @description: $1",
			"* @since ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
			"*/",
			""
		],
		"description": "模块描述"
	}
}

markdown 中使用

自定义的 snippet 在 markdown 文件（.md）中不会有提示。

可以通过打开 markdown 的 quickSuggestions 选项开解决此问题。通过 ctrl + p 打开 VS 的 settings.json，配置如下：

{
	"[markdown]":{
		"editor.quickSuggestions": true
	}
}

编辑器的快捷键

移动到行首 - fn + home
移动到行尾 - fn + end
Tip: fn 是功能键，比如比如 f9 上是一个静音的按钮，按 fn + f9 就是静音

移动到文档开头 - fn + ctrl + home
移动到文档结尾 - fn + ctrl + end

复制光标行 - alt + shift + 上下键头
Tip: 上箭头，光标不会动

单行注释 - ctrl + /
多行注释 - alt + shift + a

删除代码 - ctrl + shift + k

代码格式化 - alt + shift + f

批量操作

多个光标 - alt
连续光标 - alt + shift + i

例如需要将如下代码的 a 变量改为 a1，可以通过按下 alt 键点击鼠标左侧，就会出现多个光标，然后输入 1 即可：

function a() {
  const a = 3;
  const b = 4;
}
function b() {
  const a = 3;
  const b = 4;
}

例如我要将 b() 方法中两行代码的分号删除，可以选中该两行，在按下alt + shift + i，就会在这两行末尾各产生一个光标，最后按 delete 删除即可。

键盘快捷参考

无需去其他地方，直接看 管理 -> 键盘快捷方式

插件简单介绍

通过 vscode 扩展功能，能非常方便搜索相关插件，并进行安装。以下是笔者觉得好用的插件，可以根据需要自行安装。

Tip: 以下插件，笔者根据自己偏好标注为：高、中、低

汉化 [高]

Chinese (Simplified) Language

项目管理 [高]

Project Manager，方便 vscode 在多个项目中来回切换。

安装此插件，会在vscode 左侧增加一个文件夹的图标，点击该图标，可以保存项目，后续需要切换哪个项目，点击该项目就好。

着色匹配括号 [高]

Bracket Pair Colorizer 2，用于着色匹配括号的可定制扩展

此插件可以通过不同颜色来匹配括号

a.map(() => (b() && c.join(d(), d())))

突出显示匹配标签 [高]

Highlight Matching Tag，此扩展突出显示匹配的开始或结束标记，尽管 VSCode 有一些基本的标签匹配，但这只是 - 基本的。此扩展将尝试在任何地方匹配标签：从标签属性、字符串内部、任何文件，同时还提供广泛的样式选项来自定义标签的突出显示方式。

es6 片段 [高]

VS Code JavaScript (ES6) snippets，ES6 语法中的 JavaScript 代码片段

fin 生成：

for (const item in object) {

}

con 生成：

constructor(params) {

}

met 生成：

methodName(params) {

}

GitLens [中]

GitLens — Git supercharged

此插件增强了 vscode 中内置的 Git 功能。最典型的是每一行代码旁边都有日志，可以清楚的知道是谁写的。

安装成功后，左侧不会新增 GitLens 图标，而是会在“源代码管理”中增加一些tab：

  • COMMITS 查看每次提交的具体内容
  • FILE HISTORY，可以查看文件的提交记录、
  • 还有 BRANCHES、REMOTES、STASHES、TagS

自动重命名标签 [中]

Auto Rename Tag

比如在 html 中需要将 p 改为 span，则要改两处：

// <span> 和 </span>
<p>hello</p>

安装此插件后，只需要改一处：

// <span>
<p>hello</p>

而且也支持批量操作。比如我需要将下面两个标签都改为 span：

<p>hello</p>
<div>hello</div>

可以通过 alt 选中 p 和 div，同时编辑即可。

UI 框架 [中]

根据需要自行安装。

element-ui-helper，用于 Element-UI

美化 vscode 的图标 [中]

vscode-icons

安装完成，项目的图标更好看，用于增加颜值

Tip: 更多类似插件，在扩展中输出“icons”自行选择安装

注释 [中]

Document This，在 TypeScript 和 JavaScript 文件中自动生成详细的 JSDoc 注释。

例如给函数添加注释，在 sum() 的上一行（行{1}），按两次ctrl + alt + d：

// {1}
function sum(a, b) {
  return a + b;
}

/**
 *
 *
 * @param {*} a
 * @param {*} b
 * @return {*}
 */
function sum(a, b) {
  return a + b;
}

Vue 片段 [中]

Vue 3 Snippets

此插件包含了所有的 Vue.js 2 和 Vue.js 3 的 api 对应的代码片段。你不需要记住什么 snippets，就像往常一样在 vscode 里写代码就好了。比如你可以键入 vcom 然后按上下键选中 VueConfigOptionMergeStrategies 再按 Enter 键，就输入了 Vue.config.optionMergeStrategies 了。再比如在 .vue 文件中输入 vueinit 就会输出如下代码：

<template lang="">
    <div>

    </div>
</template>
<script>
export default {

}
</script>
<style lang="">

</style>

javascript 控制台工具 [中]

vscode-js-console-utils，轻松插入和删除 console.log 语句

用法

有选择：

  • 突出显示一个变量（或任何文本）
  • 按 Cmd+Shift+L
  • 输出（在新行上）将是： console.log('variable: ', variable);

无选择：

  • 按 Cmd+Shift+L
  • 输出（在同一行）将是： console.log();

删除 console.logs：

  • 按 Cmd+Shift+D
  • 这将删除当前文档中的所有 console.log 语句

emmet [中]

VS Code 内置集成，无需在安装。

Tip: vscode 也在升级，越来越好用。

Prettier [低]

Prettier 是一个固执的代码格式化程序。 它通过解析您的代码并使用自己的规则重新打印它来强制执行一致的样式，这些规则将最大行长度考虑在内，并在必要时包装代码。

Beautify [低]

在 Visual Studio Code 中美化javascript、JSON、CSS、Sass和HTML。

VS Code 内部使用了 js-beautify，但是它缺乏修改您希望使用的样式的能力。这种扩展使运行JS-美化在VS代码，及接受任何.jsbeautifyrc在打开的文件的路径树文件来加载你的代码样式。

右键运行代码 [低]

Code Runner - 运行多种语言的代码片段或代码文件

Tip：运行 javascript 需要安装 node

未安装此插件前，需要运行某 js 文件，需要通过 node a.js，安装此插件后，则通过右键点击 Run Code 即可：

// a.js
console.log(1);

// 未安装前
> node a.js
1

// 安装此插件后，进入 a.js，右键，点击 Run Code
[Running] node "test-vscode\a.js"
1

[Done] exited with code=0 in 0.116 seconds

Open in Browser [低]

Open in Browser - 右键将 html 文件在浏览器中打开。

Tip: vscode 中，该插件描述的很清楚

在编辑器中显示导入包的大小 [低]

import cost

import Vue from 'vue'
// 变成
import Vue from 'vue' 64k (gzipped: 22.9K)

实时服务器 [低]

live server，为静态和动态页面启动具有实时重新加载功能的开发本地服务器

安装完毕，在一个 html 页面中，右键点击 “open with live server” 即可以本地服务的方式打开该页面

主题 [低]

Better Solarized - 发布者 ginfuru

安装完成，提供三种颜色主题：深色、深色斜体、浅色。可以在设置中，通过“theme”快速找到“Color Theme”来切换主题。

Tip：更多主题，可以直接在扩展中输入“theme”自行安装即可

智能提示类 [低]

Visual Studio IntelliCode

此扩展为 Visual Studio Code 中的 Python、TypeScript/JavaScript 和 Java 开发人员提供 AI 辅助开发功能，提供基于理解代码上下文并结合机器学习的见解

配置 vue 开发环境 - Vetur+ESLint+Prettier

Tip：由于每个项目的配置都不相同，比如 eslint，哪怕都是用 npx eslint --init 来生成 .eslintrc.js，里面的内容也不尽相同，所以笔者就不介绍完整的方案，仅抛砖引玉。

首先我希望保存的时候能自动格式化：

// js 文件

let a =    "3"  ; // 等号右侧太多空格

ctrl + s，自动格式化为：

let a = "3";

可以修改 settings.json（参考上文的“format on save”小节）:

{
 "editor.formatOnSave": true
}

vetur

目前打开 .vue 文件，就像用记事本打开一样，没有高亮，没有提示，emmet 在 .vue 中也无法使用。可以使用 vscode 安装插件 vetur（VS Code 的 Vue 工具）。

安装完成，.vue 文件就会：

  • 高亮
  • 支持 emmet
  • 代码提示，比如写 p，就会弹出 propsData、props等供你选择
  • 代码片段，例如输入“vue”就会生成对应的片段
  • 右键，会有“格式化文档”选项
格式化

Vetur 支持格式化嵌入式html/pug/css/scss/less/postcss/stylus/js/ts.

Vetur 只有“整个文档格式化程序”，不能格式化任意范围。

根据 vetur 官网，我们知道可以在 VS Code 配置中选择每种语言的默认格式化程序，当前默认值如下：

{
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.pug": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatter.sass": "sass-formatter"
}

什么意思？

进入“设置->扩展->Vetur”，在 Vetur 的配置界面，能发现“Vetur › Format › Default Formatter: JS”选中的就是 prettier，当我们选择 “none”，对应的 settings.json 就会生成：

{
    "vetur.format.defaultFormatter.js": "none"
}

prettier 也是一个插件，用于格式化代码，让代码更好看，而 vetur 默认集成了该插件。

eslint

我希望保存时自动修复，比如使用将双引号改为单引号，并去除分号。而现在保存只是格式化，例如：

let a =    "b" ;

// ctrl + s

let a = "b";

在 prettier 官网，与 Linter 集成章节中提到：Linter 通常不仅包含代码质量规则，还包含样式规则。大多数风格规则在使用 Prettier 时是不必要的，但更糟糕的是——它们可能与 Prettier 冲突！使用 Prettier 解决代码格式问题，使用 linters 解决代码质量问题。

首先通过 vscode 安装插件 eslint。

Tip：该插件用于将 ESLint 集成到 VS Code 中，并使用安装在打开的工作区文件夹中的 ESLint 库。在新文件夹上，可能还需要创建一个 .eslintrc 配置文件。

接下来我们安装 eslint 包，以及通过命令生成 eslintrc 配置文件。

// 生成 package.json
> npm init -y
// 安装依赖包
> npm i -D eslint
// 通过 eslint 生成配置文件。与 vue-cli 类似
> npx eslint --init
√ How would you like to use ESLint? · style       
√ What type of modules does your project use? · none
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · prompt
√ What format do you want your config file to be in? · JavaScript
√ What style of indentation do you use? · 4
√ What quotes do you use for strings? · single
√ What line endings do you use? · windows
√ Do you require semicolons? · No / Yes
Successfully created .eslintrc.js file in ...

生成的配置文件：

// .eslintrc.js
module.exports = {
    'env': {
        'browser': true,
        'es2021': true
    },
    'extends': 'eslint:recommended',
    'parserOptions': {
        'ecmaVersion': 12
    },
    'rules': {
        'indent': [
            'error',
            4
        ],
        'linebreak-style': [
            'error',
            'windows'
        ],
		// 使用单引号
        'quotes': [
            'error',
            'single'
        ],
		// 不要分号
        'semi': [
            'error',
            'never'
        ]
    }
}

接着，将鼠标移到 let a = "b"; 上，就会看到 eslint 的提示（字符串必须使用单引号）

但在 .vue 文件中，却没有：

<script>
export default {
	...
};
// 同样的代码，确没有 eslint 的提示
let a = "b";
</script>

重启 vscode 也无效。于是决定用 eslint 重新生成一份配置，主要变动是选用 vue。

// 无需删除配置，直接运行
> npx eslint --init
√ How would you like to use ESLint? · style       
√ What type of modules does your project use? · none
// 框架使用 vue
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · prompt
√ What format do you want your config file to be in? · JavaScript
√ What style of indentation do you use? · 4
√ What quotes do you use for strings? · single
√ What line endings do you use? · windows
√ Do you require semicolons? · No / Yes
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest
Installing eslint-plugin-vue@latest

added 6 packages, and audited 122 packages in 42s

16 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Successfully created .eslintrc.js file in ...

配置文件如下：

// .eslintrc.js
// env，rules，parserOptions都没变
module.exports = {
	...
    'extends': [
        'eslint:recommended',
        'plugin:vue/essential'
    ],
    'plugins': [
        'vue'
    ],
}

重启 vscode，你会发现 .vue 文件也有 eslint 提示。

我希望保存的时候能让 eslint 修复代码，比如去除分号，将双引号改为单引号。

修改 vscode 的设置：

// settings.json
{
	"editor.codeActionsOnSave": {
		// 包括 ESLint 在内的所有提供程序打开自动修复
        "source.fixAll": true
    }
}

Tip：有的是可能写为 "source.fixAll.eslint": true，即只为 ESLint 开启。更多信息可以在 vscode 官网 的 “extensions” 中搜索 eslint。

在 js 中保存（ctrl + s），生效：

let a = "b";

// 保存 ctrl + s
let a = 'b'

但在 .vue 中却无效：

<script>
let a = "b";
</script>

// 保存，代码抖动，但还是没变
<script>
let a = "b";
</script>

在讲 vetur 的时候提到默认值 "vetur.format.defaultFormatter.js": "prettier",，也就是说 vue 中 js 会使用 prettier 格式化代码，而 eslint 修复 js 也算是格式化，两者都对 js 进行格式化，也就存在冲突。

很多文章提到将 prettier 改为 vscode-typescript，笔者干脆改为 none:

{
	"vetur.format.defaultFormatter.js": "none"
}

再次保存，.vue 中的 eslint 也生效了：

<script>
- let a = "b";
+ let a = 'b'
</script>

Tip: 分号、单引号也可以通过 prettier 来格式化。

editorconfig

很多项目有 .editorconfig 文件，例如开源项目 vue-element-admin 的 .editorconfig 的内容是：

# https://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

EditorConfig 有助于为跨各种编辑器和 IDE 处理同一项目的多个开发人员维护一致的编码风格。

EditorConfig官网提到，很多编辑器直接支持，而 vscode 需要安装插件。

下面我们来玩一下：

目前我们在 js 中，一个 tab 就是 4 个空格（我们也可以通过 vscode 设置为其他数字）。

在项目根目录新建文件 .editorconfig，内容就是 vue-element-admin 中的。

vscode 安装插件 EditorConfig for VS Code。

再次输入 tab，就从 4 个变为 2 个空格。

空格的个数是通过 indent_size 来设置。

另外说一下 root = true，EditorConfig 插件会在项目中以及每一个父目录中找 .editorconfig，直到根目录，或者配置文件中有 root = true才停止。

markdown 编辑时页面抖动

使用 markdown 写文章时，页面抖动。眼睛快瞎了，原因不明。

最后通过卸载 vscode 所有插件和配置解决。步骤如下：

  • win+r 输入 %userprofile%，删除当前路径下的 .Vscode 文件夹
  • win+r 输入 %appdata%，删除当前路径下的 code 和 vscode 文件夹
posted @ 2021-07-13 11:33  彭加李  阅读(735)  评论(0)  编辑  收藏  举报