vscode⽇志⽂件_VisualStudioCode（VScode）介绍
⼀.⽇常安利　VS code
VS vode特点：
开源，免费；
⾃定义配置
集成git
智能提⽰强⼤
⽀持各种⽂件格式(html/jade/css/less/sass/xml)
调试功能强⼤
各种⽅便的快捷键
强⼤的插件扩展
对前端这么友好，没理由不⽤。
⼆.怎么安装插件？
⽅法⼀：
按F1或Ctrl+Shift+p，输⼊extensions，点击第⼀个就可以
⽅法⼆：
ctrl + P 然后输⼊ >ext install
⽅法三：
点击图中位置
三.插件合集
a.配置类插件：
Settings Sync，⼀台电脑配置好之后，其它的⼏台电脑都不⽤配置。新机器登录⼀下就搞定了。再也
不⽤折腾环境了，使⽤GitHub Gist 同步多台计算机上的设置，代码段，主题，⽂件图标，启动，键绑定，⼯作区和扩展。
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内部⽀持："⽂件" -> "⾸选项" -> "⽂件图标主题"
html5颜代码
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：HTML5、CSS3、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.CustomBrowser": "chrome", //设置默认打开的浏览器
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
"liveServer.settings.NoBrowser": false,
"liveServer.settings.ignoredFiles": [//设置忽略的⽂件
".vscode/**",
"**/*.scss",
"**/*.sass"
]
}
或者
{
"lorTheme": "Default Light+",
"derWhitespace": "all",
"editor.fontSize": 18,
"editor.fontFamily": "'Courier New',Consolas, monospace",
"search.followSymlinks": false,
"workbench.iconTheme": "vscode-icons",
"editor.suggestSelection": "first",
"dify.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": "localhost:8088",
"webRoot": "${workspaceFolder}",
"file":"${workspaceRoot}/html/recBug.html", //这个是在浏览器中要运⾏的⽂件的路径，每次运⾏不同项⽬的时候需要修改⾥⾯的运⾏路径
}
或者
npm install -g live-server
执⾏live-server 启动
d.语⾔相关
适⽤于.NET Core的轻量级开发⼯具。
伟⼤的C＃编辑⽀持，包括语法突出显⽰，智能感知，转到定义，查所有引⽤等。
调试⽀持.NET Core(CoreCLR)。注意：不⽀持单声道调试。桌⾯CLR调试⽀持有限。
⽀持Windows，macOS和Linux上的project.json和csproj项⽬。
计算TypeScript / JavaScript⽂件的复杂性。
它是⼀组流⾏的扩展，可以帮助在Visual Studio Code中编写，测试和调试Java应⽤程序。查看VS Code中的Java以开始使⽤。

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