VisualStudioCode使⽤技巧以及常⽤插件的安装与使⽤总结前端开发常⽤⼯具介绍
sublime text：收费的代码编辑器 ，打开速度快，效率⾼
Visual Studio Code（vs code）：微软开发的免费编辑器，集成终端效果好!
atom：github发布的代码编辑器
webstorm：誉为web前端开发神器, 但是 合成的插件和配置太多，导致开启速度慢 , 适合初学者!
如果安装，安装 11 版本，不要下载最新的，部分电脑系统兼容问题很⼤!
HBuilder：国产的web开发⼯具
vscode的基本配置
1. 点击右下⾓⼩齿轮(设置按钮)（或者快捷键ctrl + shift + p），选择命令⾯板
2. 搜索snippets
3. 搜索javascript 到 javascript.json
将下⾯的内容复制粘贴，覆盖掉默认设置就可以了
// 将设置放⼊此⽂件中以覆盖默认设置
{
//⾃动保存
grid是什么"files.autoSave":"afterDelay",
// 以像素为单位控制字号。
"editor.fontSize":18,
//⼀个制表符等于的空格数
"editor.tabSize":2,
// ⾃动更新扩展
"extensions.autoUpdate":false,
//关掉⾃动更新
"update.channel":"none",
jquery下载文件插件// 通过使⽤ tab 键补全代码
"iggerExpansionOnTab":true,
"Level":1,
"vsicons.dontShowNewVersionMessage":true,
"workbench.startupEditor":"newUntitledFile",
"workbench.sideBar.location":"right",
"firmDelete":false
}
常⽤插件
1. open in browser
打开默认浏览器 快捷键： alt+b
也可以在右击⿏标，选择 Open In Default Brower
2.Path intellisense ⾃动提⽰路径
3.Auto Close Tag :
匹配标签，关闭对应的标签。很实⽤【HTML/XML】
4.Auto Rename Tag
修改 html 标签，⾃动帮你完成尾部闭合标签的同步修改
5.HTML Snippets：
微软新编程语言超级实⽤且初级的 H5代码⽚段以及提⽰
6.HTMLHint：
html代码检测
7.HTML CSS Support
让 html 标签上写class 智能提⽰当前项⽬所⽀持的样式。新版已经⽀持scss⽂件检索，这个也是必备插件之⼀
8.Path Autocomplete
路径智能补全java类的继承
9.JavaScript Snippet Pack
针对js的插件，包含了js的常⽤语法关键字，很实⽤；
10.Class autocomplete for HTML
编写html代码的朋友们对html代码的⼀⼤体现就是重复，如果纯⽤⼿敲不仅累还会影响项⽬进度，这款⾃动补全插件真的很棒；
10.beautify
格式化代码的⼯具，可以格式化JSON|JS|HTML|CSS|SCSS,⽐内置格式化好⽤
11.jQuery Code Snippets：
jquery 重度患者必须品
12.vscode-icon：
python正则表达式findall和search让 vscode 资源树⽬录加上图标，必备良品！
小学生有必要学编程吗?
13.VSCode Great Icons：
另⼀款资源树⽬录图标
会给颜⾊代码增加⼀个当前匹配代码颜⾊的背景，⾮常好
15.Color Info：
提供你在 CSS 中使⽤颜⾊的相关信息。你只需在颜⾊上悬停光标，就可以预览⾊块中⾊彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
16.Bracket Pair Colorizer：
让括号拥有独⽴的颜⾊，易于区分。可以配合任意主题使⽤。
17.vscode-fileheader：
顶部注释模板，可定义作者、时间等信息，并会⾃动更新最后修改时间
18.Document This :
js 的注释模板 （注意：新版的vscode已经原⽣⽀持，在function上输⼊/** tab）19.filesize：
在底部状态栏显⽰当前⽂件⼤⼩，点击后还可以看到详细创建、修改时间
20.Code Runner :
代码编译运⾏看结果，⽀持众多语⾔
21.Bootstrap 3 Sinnpet：
常⽤ bootstrap 的可以下
22.GitLens：
丰富的git⽇志插件
23.VueHelper：
vue代码提⽰
24.Bookmarks：
⼀个书签⼯具，还是很有必要的
25.Prettier 代码⾃动化格式化
26.cssrem
将rem⾃动换算城rem，注意默认的font-size为16px; 需要根据设计图⾃⼰去修改配置

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。