VS Code配置及插件推荐

来源：互联网发布：手机vb编辑器使用编辑：程序博客网时间：2024/06/06 07:23

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/lessBrackets 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代码提示)SassSCSS IntelliSenseSublime BabelVSCode Great Icons (文件图标)vscode-icons （文件图标）

主题、文件图标推荐

主题我用的是：Brackets Light （个人喜欢亮色）
文件图标我用的是：VSCode Great Icons

0 0