VS Code配置及插件推荐
个人感觉vs code非常强大，插件也非常多，用来作为前端开发是很适合的。之前在折腾sublime text3，但是ST3的配置比较麻烦，而且插件安装多了之后，代码提示找不到点上，而vs code是根据文件格式类型来提示的，非常好用。
下载地址
官网：https://code.visualstudio.com/
特性
自带node debug，git
自带Terminal
强大的代码提示
截图
用户设置
打开 文件 > 首选项 > 用户设置(U)，（忽略覆盖工作区提示）
{
// 控制字体系列。
"editor.fontFamily": "Consolas, 'Courier New', monospace,'宋体'",
// 以像素为单位控制字号。
"editor.fontSize": 18,
// 控制选取范围是否有圆角
"editor.roundedSelection": false,
// 建议小组件的字号
"editor.suggestFontSize": 16,
// 在“打开的编辑器”窗格中显示的编辑器数量。将其设置为 0 可隐藏窗格。
"explorer.openEditors.visible": 0,
// 是否已启用自动刷新
"git.autorefresh": false,
// 是否启用了自动提取。
"git.autofetch": false,
// 以像素为单位控制终端的字号，这是 editor.fontSize 的默认值。
"terminal.integrated.fontSize": 14,
// 控制终端游标是否闪烁。
"terminal.integrated.cursorBlinking": true,
// 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。
"editor.tabSize": 2,
// Tab Size
"beautify.tabSize": 2
}
用户代码片段
打开文件 > 首选项 > 用户代码片段 >（搜索代码语言）
HTML片段
{
"ss": {
"prefix": "ss",
"body": [
"<script src="$1"></script>"
],
"description": "<script src="..."></script>"
},
"html5": {
"prefix": "html5",
"body": [
"<!DOCTYPE html>",
"<html lang="zh-CN">",
"",
"<head>",
" <meta charset="UTF-8">",
" <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">",
" <meta http-equiv="X-UA-Compatible" content="ie=edge">",
" <title>${1:Document}</title>",
"</head>",
"",
"<body>",
" $2",
"</body>",
"",
"</html>"
],
"description": "HTML5"
}
}
JavaScript / JavaScript React
{
"cl": {
"prefix": "cl",
"body": [
"console.log($1)"
],
"description": "console.log('')"
},
"dg": {
"prefix": "dg",
"body": [
"document.getElementById($1)"
],
"description": "document.getElementById(id)"
},
"jsdoc": {
"prefix": "__",
"body": [
"/**",
" * $1",
" */"
],
"description": "/** */"
}
}
快捷键设置
打开 文件 > 首选项 > 键盘快捷方式(K)
// 将键绑定放入此文件中以覆盖默认值
[
// ctrl+d 删除当前行
{
"key": "ctrl+d",
"command": "editor.action.deleteLines",
"when": "editorTextFocus && !editorReadonly"
},
// ctrl+shift+d 复制当前行到下一行
{
"key": "ctrl+shift+d",
"command": "editor.action.copyLinesDownAction",
"when": "editorTextFocus && !editorReadonly"
},
// ctrl+shift+f 格式化代码
{
"key": "ctrl+shift+f",
"command": "editor.action.formatDocument",
"when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
},
// alt+/ 代码提示
{
"key": "alt+/",
"command": "editor.action.triggerSuggest",
"when": "editorTextFocus"
},
// ctrl+shift+/ 多行注释
{
"key": "ctrl+shift+/",
"command": "editor.action.blockComment",
"when": "editorTextFocus"
}
]
插件（主要开发React）
提示：VS Code自带有代码格式化功能，可以格式化HTML、CSS、Javascript、JSON文件，格式JSX文件时需要设置缩进方式为空格·
Auto Close Tag （自动关闭HTML标签）
Auto Rename Tag (HTML标签自动改名)
Babel ES6/ES7
Beautify css/sass/scss/less
Brackets Light (主题)
Complete JSDoc Tags (js文档注释提示)
Git History (查看git提交记录)
HTML CSS Support (HTML中提示可用的class)
npm Intellisense (提示可以require的模块名称)
One Dark Theme (主题)
Path Intellisense (路径补全)
Reactjs code snippets (reactjs代码提示)
Sass
SCSS IntelliSense
Sublime Babel
VSCode Great Icons (文件图标)
vscode-icons （文件图标）
主题、文件图标推荐
主题我用的是：Brackets Light （个人喜欢亮色）
文件图标我用的是：VSCode Great Icons
————————————————
版权声明：本文为CSDN博主「peakchen90」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/peakchen_90/article/details/53382883