---

前言

想复习下Css和JavaScript,又突然想用自己没用过的vscode,而网上的vscode扩展推荐除了中文扩展非常详细,但也有很多细节的地方比较麻烦,于是有了这篇从下载好vscode到让它变得顺手的记录,本文主要为了自我记录,如有错漏,欢迎大家提出讨论,如有帮助,不胜荣幸。

---

一、下载vscode

这一步很简单,网上也有很多精准到每一步的教程,这里只留下vscode官网网址https://code.visualstudio.com/

二、打开vscode以及下载扩展

1.打开vscode

我这里已经下载了中文扩展很多地方已经翻译好了,最开始一眼看去全是英文,惊得我直接就去搜索vscode怎么下载中文扩展。

2.下载扩展

中文扩展

先找到左边那一条最下面的扩展商店
进去后搜索框输入"Chinese"结果如下
简体下载第一个 Chinese(Simplifies)即可,英文情况下"安装"处应是"install"
下载完后按"Ctrl+Shift+P",再输入’Configure Display Language",点一下搜出来的选项进入设置,然后选择"zh-cn",重启vscode,就变成了亲切的中文页面。

Live Server

右键html文件的时候增加一个"Open with Live Server ",效果为在浏览器中打开这个html文件,并且在写代码中ctrl+s保存文件后立刻可以在网页中看到效果

HTML Class Suggestions

根据项目里的css文件为html里类的属性进行提示

图标扩展

光秃秃的项目管理器有些不好看,可以添加扩展让它看起来舒服一些,我用的Material Icon Theme,效果如图,这个选择自己喜欢的就好

3.让我纠结不已的小地方

!+Tab生成模板的lang值问题

在vscode,在一个新建的文件中,打出" ! "然后按tab可以创建一个html标准模板,但在这个模板中html的lang设置为en导致网页每次打开都会提示是否翻译,懒人又不想每次都手动改一下,很多打开文件配置这个的方法也很复杂,最后我找到个简单很多的办法,先打开左下齿轮里的设置
搜索Emmet:Variables 就可以设置快捷生成的模板的lang的值了

总结

在写这篇文章前,我苦恼地对着各种教程弄了一上午扩展,最后想写篇文章留个记录,结果当我开始写这篇文章,一个个禁用卸载掉那些扩展时,我发现很多功能其实vscode已经自带了,这导致我要记录的内容越来越少,越来越少。写文章的过程中,反而是验证这些扩展是否有效更耗时间,不过这个过程虽然有点浪费时间的嫌疑,但一个个验证到最后把扩展删的差不多也让我莫名松了口气,如同卸下了包袱一样。如果以后又有我觉得好用的扩展有空会补充到文章中,希望今后能多积累经验,少走些弯路。