Visual Studio Code（VS code）介绍

时间 2019-11-11

标签 visual studio code 介绍栏目 Visual Studio 繁體版

原文原文链接

一.平常安利　VS code

　　VS vode特色：javascript

开源，免费；
自定义配置
集成git
智能提示强大
支持各类文件格式（html/jade/css/less/sass/xml）
调试功能强大
各类方便的快捷键
强大的插件扩展

　　对前端这么友好，没理由不用。css

Visual Studio Code（VScode ）官网　：https://code.visualstudio.com/html

Visual Studio Code（VScode ）github地址：https://github.com/Microsoft/vscode前端

二.怎么安装插件？

方法一：vue

按F1或Ctrl+Shift+p，输入extensions，点击第一个就能够

方法二：html5

ctrl + P 而后输入 >ext install

方法三：java

点击图中位置

三.插件合集

插件官网：https://marketplace.visualstudio.com/ react

a.配置类插件：

Settings Sync，一台电脑配置好以后，其它的几台电脑都不用配置。新机器登陆一下就搞定了。不再用折腾环境了，使用GitHub Gist同步多台计算机上的设置，代码段，主题，文件图标，启动，键绑定，工做区和扩展。git

Debugger for Chrome，映射vscode上的断点到chrome上，方便调试程序员

beautify格式化代码工具，美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代码。

Auto Close Tag，自动闭合HTML/XML标签

Auto Rename Tag，自动完成另外一侧标签的同步修改

Chinese (Simplified) Language Pack for Visual Studio Code，中文（简体）语言包，将界面转换为中文，使用快捷键【Ctrl+Shift+P】来实现，在弹出的搜索框中输入【configure language】，而后选择搜索出来的【Configure Display Language】,而后就打开了locale.json文件，locale而后从新输入冒号会自动出现代码提示。

Code Spell Checker，识别单词拼写是否有误，并给出提示

vscode-icons，显示Visual Studio代码的图标，目前该插件已被vscode内部支持："文件" -> "首选项" -> "文件图标主题"

guides，显示代码对齐辅助线，很好用

Rainbow Brackets，为圆括号，方括号和大括号提供彩虹色。这对于Lisp或Clojure程序员，固然还有JavaScript和其余程序员特别有用。

Bracket Pair Colorizer，给括号加上不一样的颜色，便于区分不一样的区块，使用者能够定义不一样括号类型和不一样颜色

Indent-Rainbow，用四种不一样颜色交替着色文本前面的缩进

filesize，在状态栏中显示当前文件大小，点击后还能够看到详细建立、修改时间

Import Cost，对引入的计算大小

Path Intellisense，自动提示文件路径，支持各类快速引入文件

Path Autocomplete：路径完成提示

WakaTime，从您的编程活动自动生成的度量标准，看法和时间跟踪。

GitLens，git日志查看插件

GitLens 加强了 Visual Studio Code 中内置的 Git 功能。例如 commits 搜索，历史记录和和查看代码做者身份，还能经过强大的比较命令得到有价值的看法等等

REST Client，容许直接发送HTTP请求并在Visual Studio Code中查看响应。

Npm Intellisense ，用于在 import 语句中自动填充 npm 模块，require 时的包提示（最新版的vscode已经集成此功能）

Azure Storage，VS Code的Azure存储扩展容许您部署静态网站并浏览Azure Blob容器，文件共享，表和队列。按照本教程从VS Code部署Web应用程序到Azure存储。

Project Manager，在多个项目以前快速切换的工具

能够定义本身的收藏项目，或选择自动检测VSCode项目，Git，Mercurial和SVN存储库或任何文件夹。

如下是Project Manager提供的一些功能：

将任何项目保存为收藏夹
自动检测VSCode，GIT中，水银或SVN存放区
在相同或新窗口中打开项目
识别已删除/重命名的项目
一个状态栏标识当前项目
专门的活动栏

Language Support for Java(TM) by Red Hatredhat，java开发环境

Todo Tree，此扩展能够快速搜索（使用ripgrep）您的工做区以获取TODO和FIXME等注释标记，并在资源管理器窗格的树视图中显示它们。单击树中的TODO将打开文件并将光标放在包含TODO的行上。

找到的TODO也能够在打开的文件中突出显示。

fileheader，顶部注释模板，可定义做者、时间等信息，并会自动更新最后修改时间，快捷键ctrl+alt+i在文件开头自动输入做者信息和修改信息等内容

b.VS code 主题集合

1.Night Owl ，一个很是适合夜猫子的 VS Code 主题。像是为喜欢深夜编码的人精心设计的。

2.Atom One Dark Theme，一个基于Atom的黑暗主题

3.Dracula Official，官方吸血鬼主题，博主用的就是这款，很漂亮

4.One Dark Pro，Atom标志性的One Dark主题，也是VS Code下载次数最多的主题之一！

5.Bimbo，简约而现代的神奇海洋主题

c.代码提示提示类

HTML Snippets，智能提示HTML标签，以及标签含义，完整的HTML代码提示，包括HTML5

HTML CSS Support，智能提示CSS类名以及id，在 html 标签上写class 智能提示css样式

jQuery Code Snippets，jQuery代码智能提示

超过130个用于JavaScript代码的jQuery代码片断。

只需键入字母'jq'便可得到全部可用jQuery代码片断的列表。

HTMLHint，html代码检测支持html5

JavaScript(ES6) code snippets，ES6语法智能提示，以及快速输入，不只仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各类包含js代码文件的时间

Can I Use：HTML五、CSS三、SVG的浏览器兼容性检查

TypeScript Hero：用于编写 TypeScript

React/Redux/react-router Snippets语法智能提示

Reactjs code snippets，一个 React 自动补工具

Vetur，Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

VueHelper，主要加强了编写vue和扩展元素ui、vux、iview的能力

Vue 2 Snippets、Vue VSCode Snippets，VUE代码自动补全插件

quokka，调试工具插件，可以根据你正在编写的代码提供实时反馈。它易于配置，并可以预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它可以开箱即用

CSS Peek，能够追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。

HTML Boilerplate，经过使用 HTML 模版插件，你就摆脱了为 HTML 新文件从新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，便可生成干净的文档结构。

Prettier，可以将整个 JS 和 CSS 文档快速格式化为统一的代码样式。若是你还想使用 ESLint，那么还有个 Prettier – Eslint 插件。

Color Info，提供你在 CSS中使用颜色的相关信息。你只需在颜色上悬停光标，就能够预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。

Icon Fonts，可以在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons

Minify，用于压缩合并 JavaScript 和 CSS 文件的应用程序。提供了大量自定义的设置，和自动压缩保存并导出为.min文件的选项。可以经过 uglify-js、clean-css 和 html-minifier，与 JavaScript、CSS 和 HTML 协同工做。使用F1 运行文件缩小器Minify。

Git History，git提交历史

Window Colors，每一个VSCode窗口均可以独特意自动着色。

live server 插件，开启本地服务器

开启本地开发时服务器，为静态和动态页面提供实时刷新功能

配置Live Server  
{
  "liveServer.settings.port": 8080, //设置本地服务的端口号
      "liveServer.settings.root": "/", //设置根目录，也就是打开的文件会在该目录下找
      "liveServer.settings.CustomBrowser": "chrome", //设置默认打开的浏览器
      "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
      "liveServer.settings.NoBrowser": false,
      "liveServer.settings.ignoredFiles": [//设置忽略的文件
          ".vscode/**",
          "**/*.scss",
         "**/*.sass"
     ]
 }

或者
{
    "workbench.colorTheme": "Default Light+",
    "editor.renderWhitespace": "all",
    "editor.fontSize": 18,
    "editor.fontFamily": "'Courier New',Consolas,  monospace",
    "search.followSymlinks": false,
    "workbench.iconTheme": "vscode-icons",
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "liveServer.settings.NoBrowser": true,
    "liveServer.settings.CustomBrowser": "chrome",
    "liveServer.settings.donotShowInfoMsg": true,
    "liveServer.settings.donotVerifyTags": true,
    "liveServer.settings.port": 5500,

}

launch.json
{
            "type": "chrome",
            "request": "launch",
            "name": "使用本机chrom调试",
            "url": "http://localhost:8088",
            "webRoot": "${workspaceFolder}",
            "file":"${workspaceRoot}/html/recBug.html", //这个是在浏览器中要运行的文件的路径，每次运行不一样项目的时候须要修改里面的运行路径
        }
或者
npm install -g live-server
执行live-server 启动

d.语言相关

C＃

适用于.NET Core的轻量级开发工具。
伟大的C＃编辑支持，包括语法突出显示，智能感知，转到定义，查找全部引用等。
调试支持.NET Core（CoreCLR）。注意：不支持单声道调试。桌面CLR调试支持有限。
支持Windows，macOS和Linux上的project.json和csproj项目。

CodeMetrics

计算TypeScript / JavaScript文件的复杂性。

Java Extension Pack

它是一组流行的扩展，能够帮助在Visual Studio Code中编写，测试和调试Java应用程序。查看VS Code中的Java以开始使用。

其余

万能语言运行环境 Code Runner

插件名称：Code Runner
插件地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

若是你须要学习或者接触各类各样的开发语言，那么 Code Runner 插件可让你不用搭建各类语言的开发环境，直接经过此插件就能够直接运行对应语言的代码，很是适合学习或测试各类开发语言。

支持的语言有：C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, 以及一些自定义的命令。

快速注释 Document This

插件名称：Document This
插件地址：https://marketplace.visualstudio.com/items?itemName=joelday.docthis

优秀的代码除了优秀的性能、规范的格式，注释也是不可或缺的，并且注释也应该有一套标准的注释方法，特别对于 JavaScript 这种语言。

Document This 能够快速地帮你生成注释，如一些函数的注释还能帮你抽取出参数的定义等，是你编写规范代码必备的工具。

CSS 类名智能提示

插件名称：IntelliSense for CSS class names in HTML
插件地址：https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

在 HTML 中调用定义好的样式名时，有时须要常常在 HTML 与 CSS 文件之间切换，来回地查看你已定义好的 CSS 类名。

而有了 IntelliSense for CSS class names in HTML 插件后，你能够在 HTML 中须要调用 CSS 类名的地方，此插件会智能地给你已定义 CSS 类名的提示。

Live Server插件能够开启本地服务器

Markdown Preview Enhanced md加强展现

Autoprefixer，css自动添加浏览器厂商前缀

只需兼容主流浏览器

正常状况使用：（在书写完的CSS样式文件中，按F1，选择Autoprefixer CSS）

这时候会添加最新须要兼容的css头（PS：如今基本上只考虑Safari和Chrome了）

兼容其余浏览器

可是，这每每不是咱们须要的，有时候还须要兼容Firefox、Opera和IE，那么能够自定义VSCode的配置项：

// autoprefixer配置
    "autoprefixer.browsers": [ "ie >= 6", "firefox >= 8", "chrome >= 24", "Opera>=10" ]

效果演示：

Courier New，一款好看字体

Markdown Preview Enhanced，实时预览markdown，markdown使用者必备

markdownlint，markdown语法纠错

Color Highlight：颜色值在代码中高亮显示

Highlight Matching Tag：高亮匹配的标签

Image preview：鼠标移到路径里显示图像预览

IntelliSense for CSS class names in HTML：CSS 类名智能提示，把项目中 css 文件里的名称智能提示在 html 中

lit-html：提供语法高亮和相应的补全支持

React Native Tools：为 React Native 开发提供的专门的插件

SVG Viewer：查看SVG 文件

Open-In-Browser：此插件在快捷菜单中添加了在默认浏览器查看文件选项

Regex Previewer：用于实时测试正则表达式的实用工具

TODO Highlight：写到某一部分的代码时，其中部分的功能须要稍后再来实现，这是就能够在对应的代码处添加一个 TODO 类型的注释，那么后期就能够快速地跳转到这部分继续写

Document This：快速注释

File Peek：根据路径字符串，快速定位到文件

Color Picker：拾色器