对于那些刚接触 VScode 的人

这篇文章是为那些刚接触 VScode 的人或那些在新机器上从头开始重建的人准备的。（也为我自己）

总流量

安装

初始设置

日语支持
格式化程序设置

安装所需的扩展

安装

官方网站从下载安装程序

初始设定

日语支持（Visual Studio Code 的日语语言包）

顾名思义，它是一个将其设置为日语的扩展。
只需安装它并重新启动 VScode 即可轻松支持日语。（弹出窗口会询问您是否要重新启动。）

设置默认格式化程序

干净的代码提高了可读性，最重要的是，只看乱七八糟的代码会降低你的积极性。
在团队开发中，如果formatter不同，很难理解差异，原来的变化混入其中。
设置格式化程序自动格式化代码并提高可读性，因此它是源代码控制的重要项目。

更漂亮

格式化程序Prettier 是常用的。

除此之外，还有Beautify 作为 HTML 的有效格式化程序，但似乎维护已经结束。
格式化程序设置过程如下。
1. 从侧面菜单扩展中搜索Prettier，或这里从安装
2. 从窗口左下方的设置 (Ctrl+,) 打开设置屏幕
3. 在搜索窗口中输入formatter → 从Default Formatter 下拉列表中选择Prettier - Code formatter

如果要单独更改设置（例如，Beautify 用于 HTML，Prettier 用于 CSS 和 JavaScript），请从设置屏幕的右上角打开 setting.json 并输入以下内容。

设置.json

"[html]": {
  "editor.defaultFormatter": "HookyQR.beautify"
},
"[css]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

创建新文件时文件格式的默认设置

默认情况下，文件格式为纯文本。
- 如果将其保留为纯文本，将无法完成，工作效率会降低。

只有在 VScode 上新创建时才会变为纯文本。打开现有文件时，文件格式会根据扩展名自动更改。

想马上从新创作开始写，但是每次都从纯文本切换格式很麻烦！对于那些说，请将以下设置为setting.json。

设置.json

// HTMLをデフォルトにしたい場合
"files.defaultLanguage": "html"

方便的扩展

HTML

扩展名	功能描述
实时预览	预览您正在编码的 HTML（Win：Alt+L→Alt+O，Mac：Command+L→Command+O）
自动重命名标签	如果您更改其中一个配对标签，另一个将同时更改
HTML提示	它将根据 HTML 编写规则告诉您有关编写错误和缺少标签的信息。
图像预览	img标签指定的图片显示在行数旁边（虽然尺寸很小……）
缩进-彩虹	自动为缩进添加颜色，使其更易于查看
突出显示匹配标签	当您将鼠标悬停在任何标签上时，它会告诉您配对标签的颜色。
全屏宽度	它会通过为代码中包含的全角字符着色来告诉您
路径自动完成	它完成文件路径
HTML 结束标记标签	在附加类的标签的结束标签中显示类名

CSS/SCSS

扩展名	功能描述
CSS 窥视	在弹出窗口中显示相应的 CSS 样式
实时 Sass 编译器	自动将 SCSS/SASS 转换为 CSS
CSS 树验证器	它会指出你的 CSS 拼写错误。
颜色信息	当您将鼠标悬停在颜色代码上时，彩色图像会显示在弹出窗口中

JavaScript

扩展名	功能描述
ESLint	它会告诉你代码的语法和书写错误。我经常和 Prettier 搭配使用

吉特

扩展名	功能描述
Git 图表	一个允许您使用 GUI 操作 Git 的扩展，允许您直观地管理分支和提交
表情符号	一个扩展，允许您向提交消息添加一个图标，一目了然地显示提交类型。

图标

扩展名	功能描述
材质图标主题	它在资源管理器的文件左侧放置了一个带有平面设计的简单图标。

额外的

扩展名	功能描述
降价多合一	一个支持markdown语法的一体化包
降价皮棉	一个markdown linter，它会告诉你符号是否有错误
Qiita Markdown 预览	它是一个支持 Qiita 进行 markdown 预览的扩展

提示

主题

VScode 的优点之一是您可以根据自己的喜好自定义外观。
- VS 代码主题有无数可用的主题，你一定会找到你喜欢的！也许。

主题名称	功能描述
GitHub 主题	受 GitHub 启发的主题
冰山主题	这是一个以蓝灰色为基础的主题，带有酷炫的图像。

工作空间概念

VScode 具有工作区的概念。例如，作为图像，项目 A 的工作区和项目 B 的工作区。（顾名思义）
创建工作区的优势在于可以更轻松地切换到具有多个项目的状态，因为分离很明确。（也许还有更多？）
因此，它不太可能干扰其他工作空间，并且还有一个优点是您可以专注于自己的事情。

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308628456.html

总流量

安装