Vscode初使用
现在的大前端时代来临,让我们需要一款前端的编辑器来帮助我们书写代码,那么推荐大家给来自微软的宇宙第一编辑器:Vscode
看了知乎上一篇大佬的文章,删减了很多不必要的扩展插件:文章
Vscode安装
软件的安装非常简单,不需要进行额外的破解
首先进入官网,下载安装包
图片
默认安装就可以了
Vscode卸载
Vscode插件配置
Vscode的安装非常简单,之所以Vscode能作为C/C#/java/html的主流编辑器,就是因为开源的自身吸引了亿万开发者为Vscode的生态提供了数以千计的插件,Vscode这个英雄有了神装加持变得勇猛无敌.
那么我们作为前端开发者要想舒舒服服的进行开发我们需要那些插件呢?
1. 插件如何安装?
首先在主页面点击下图所示图标
图片
这样就进入了插件管理的面板
我们通过上边的搜索框将插件名称直接进行搜索
然后点击install就可以安装了
图片
2. 命令面板
我们通过快捷键shift+ctrl+p打开命令面板
输入:open settings命令
图片
接着会打开settings.json文件
我们很多在集成完vscode插件完以后,还得通过settings.json进行某些特定设置
图片
3. 前端插件一览
1. Better Comments(注释高亮提醒)
书写的注释会高亮
图片
2. Chinese(Simplified) Language Pack for Visual Studio Code(Vscode简体中文语言包)
这个就不解释了吧...
图片
3. Code Runner(运行代码)
可以选中部分代码进行运行,支持多种语言
图片
4. colorize
图片
// 高亮
"colorize.languages": [
"javascript",
"css",
"sass",
"scss",
"less",
"postcss",
"sss",
"stylus",
"xml",
"svg",
"html"
]
5. Material Theme(主题)
Vscode最有名的一个暗黑系主题,极客风范
图片
6.ESLint
图片
// ESlint
"editor.codeActionsOnSave": {
"source.fixAll": true
}
7. Git History(git插件)
能帮助我们把将代码更舒服的通过git进行同步
图片
8. GitLens — Git supercharged(git插件)
两个git插件结合,git使用的明明白白
图片
9. Highlight Matching Tag(标签高亮)
图片
图片
10. Live Server(在线运行)
图片
给vscode带了一个内置服务器,在代码右键开启
图片
图片
默认端口号为5500
11. markdownlint(Markdown语法支持)
图片
书写Markdown很舒服
12. Open in External App
此处推荐一波知乎大佬的个人插件
一般我们写完html代码后,肯定得通过浏览器预览相关效果,这个插件的感觉就很棒
图片
//配置了Microsoft Edge和FireFox两个打开html的浏览器
"openInExternalApp.openMapper": [
{
// represent file extension name
"extensionName": "html",
// the external applications to open the file which extension name is html
"apps": [
// openCommand can be shell command or the complete executable application path
// title will be shown in the drop list if there are several apps
{
"title": "Microsoft Edge",
"openCommand": "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe"
},
{
"title": "FireFox",
"openCommand": "D:\\Program Files\\Mozilla Firefox\\firefox.exe",
// open in firefox under private mode
"args": ["-private-window"]
}
]
}
]
13. Prettier - Code formatter(代码格式整理)
图片
Vscode里最好用的代码整理工具
安装完成后,首先在html使用shift+alt+f快捷键整理一下代码格式
因为vscode自身会有代码整理规范的工具
右下角就会让你设置用那个插件进行代码格式化,选择使用Prettier就好了
设置完成后整理完代码如下
图片
// 配置prettier
// 如果使用eslint的话把js的格式化进行注释,同时把下方vetur的注释给打开
// "vetur.format.defaultFormatter.js": "none",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[yaml]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 格式化vue文件时vetur格式化
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
14. REST Client(接口测试调用)
虽然不会用,但是研究明白了这东西的话,比Postman强
图片
15. Settings Sync(设置同步)
Vscode的一大难题就是插件设置繁琐,这个会把vscode的相关设置同步到github上去,这样换电脑时,可以一个快捷键解决问题
图片
16. TODO Tree
如果习惯在应用程序代码中编写待办事项的开发者，可以安装 TODO Tree这样的扩展名对于突出显示整个项目中设置的待办事项非常有用。
图片
// todo-tree插件
"todo-tree.tree.showScanModeButton": true,
"todo-tree.general.tags": ["TODO:", "FIXME:"],
"todo-tree.highlights.defaultHighlight": {
"gutterIcon": true
},
"todo-tree.highlights.customHighlight": {
"TODO:": {
"foreground": "#fff",
"background": "#ffbd2a",
"iconColour": "#ffbd2a"
},
"FIXME:": {
"foreground": "#fff",
"background": "#f06292",
"icon": "flame",
"iconColour": "#f06292"
}
}
17. Vetur(Vue必备插件)
写Vue,你不装这插件行吗????
图片
18. vscode-icons(图标)
Vscode好看的图标库之一,你值得拥有
图片
19. XML
图片
20. YAML
图片
settings.json整体配置
{
// 图标
"workbench.iconTheme": "vscode-icons",
// 主题
"workbench.colorTheme": "Material Theme",
// 闭合标签
"editor.renameOnType": true,
// 自动保存格式化
"editor.formatOnSave": true,
// todo-tree插件
"todo-tree.tree.showScanModeButton": true,
"todo-tree.general.tags": ["TODO:", "FIXME:"],
"todo-tree.highlights.defaultHighlight": {
"gutterIcon": true
},
"todo-tree.highlights.customHighlight": {
"TODO:": {
"foreground": "#fff",
"background": "#ffbd2a",
"iconColour": "#ffbd2a"
},
"FIXME:": {
"foreground": "#fff",
"background": "#f06292",
"icon": "flame",
"iconColour": "#f06292"
}
},
// ESlint
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// 配置prettier
// 如果使用eslint的话把js的格式化进行注释,同时把下方vetur的注释给打开
// "vetur.format.defaultFormatter.js": "none",
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[yaml]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 格式化vue文件时vetur格式化
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
//注释美化
"better-comments.tags": [
{
"tag": "!",
"color": "#FF2D00",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "?",
"color": "#3498DB",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "//",
"color": "#474747",
"strikethrough": true,
"backgroundColor": "transparent"
},
{
"tag": "todo",
"color": "#FF8C00",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "*",
"color": "#98C379",
"strikethrough": false,
"backgroundColor": "transparent"
}
],
// 高亮
"colorize.languages": [
"javascript",
"css",
"sass",
"scss",
"less",
"postcss",
"sss",
"stylus",
"xml",
"svg",
"html"
],
//浏览器调试
"openInExternalApp.openMapper": [
{
// represent file extension name
"extensionName": "html",
// the external applications to open the file which extension name is html
"apps": [
// openCommand can be shell command or the complete executable application path
// title will be shown in the drop list if there are several apps
{
"title": "Microsoft Edge",
"openCommand": "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe"
},
{
"title": "FireFox",
"openCommand": "D:\\Program Files\\Mozilla Firefox\\firefox.exe",
// open in firefox under private mode
"args": ["-private-window"]
}
]
}
]
}
