Visual Studio Code

1、html快速生成 --- !+ Tab

2、ctr+shift+x 打开插件商城

   常用插件:

Auto Close Tag

 

自动添加HTML / XML关闭标签(必备)

 

 

Auto Rename Tag

 

自动重命名配对的HTML / XML标签(必备)

 

 

Beautify

 

格式化javascript,JSON,CSS,Sass,和HTML

 

Bootstrap 4 & Font awesome snippets

 

包含Bootstrap 4&Font awesome 的代码片段

 

 

Bracket Pair Colorizer

 

颜色识别匹配括号

 

 

Class autocomplete for HTML

 

智能提示HTML class =“”属性(必备)

 

Code Runner

 

非常强大的一款插件,能够运行多种语言的代码片段或代码文件:C,C ++,Java,JavaScript,PHP,Python,Perl,Ruby,Go等等,安装完成后,右上角出现:

点击这个按钮就可以运行你的文件了(必备)

 

css peek

 

能够查看CSS ID和类的字符串作为HTML文件中相应的CSS定义(必备)

 

使用方法:将光标放在class里面的属性,右击

 

Dash

 

查文档必备,搭配 dash(不过似乎只有 mac 版)😁

快捷键 ctrl + h 它根据你当前选中的语言查找 dash 里面的文档

 

 

Debugger for Chrome

 

让 vscode 映射 chrome 的 debug功能,使静态页面都可以用 vscode 来打断点调试

 

简单使用戳我

 

Document This

 

添加注释块

 

 

设置:

 

 "docthis.includeAuthorTag": true,//出现@Author
 "docthis.includeDescriptionTag": true,//出现@Description
 "docthis.authorName": "shenzekun",//作者名字

 

快捷键: 按两次Ctrl+alt+d

 

ESLint

 

EsLint可以帮助我们检查Javascript编程时的语法错误。比如:在Javascript应用中,你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码,找到bug并确保一定程度的JS语法书写的正确性。

 

配置戳我

 

Font-awesome codes for html

 

用于 html 的Font-awesome代码片段

 

filesize

 

在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间

 

 

Git History

 

以图表的形式查看git日志 

 

使用 command+shift+p(Ctrl+shift+p) 输入git log就可以看到了

 

Git Lens

 

git 日志插件

 

 

HTML CSS Support

 

在 html 标签上写class 智能提示当前项目所支持的样式(必备)

 

HTML Snippets

 

html 代码片段(必备)

 

htmlhint

 

html代码检测

 

 

htmltagwrap

 

可以在选中HTML标签中外面套一层标签

 

 

使用:选择一大段代码,然后按“Alt + W”

 

Indenticator

 

突出目前的缩进深度

 

 

IntelliSense for CSS class names

 

智能提示 css 的 class 名

 

Image Preview

 

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

 

 

JavaScript (ES6) code snippets

 

es6代码片段(必备)

 

JavaScript Snippet Pack

 

js代码片段(必备)

 

jQuery Code Snippets

 

jQuery 代码片段

 

Live Sass Compiler

 

实时编译 sass ,不过需要配置,附上我的配置

 

"liveSassCompile.settings.formats":[
        // You can add more
        {
            "format": "compressed",//压缩
            "extensionName": ".min.css",//编译后缀名
            "savePath": "./css"//编译保存的路径
        }
    ],

 

使用

 

 

markdownlint

 

markdown 语法检查

 

Node.js Modules Intellisense

 

可以在导入语句中自动完成JavaScript / TypeScript模块。

 

 

npm Intellisense

 

在导入语句中自动填充npm模块,跟Node.js Modules Intellisense差不多

 

open in browser

 

当前的 html 文件用浏览器打开,类似 webstorm 的那四个小浏览器图标功能,前提条件html 文件必须保存

 

快捷键alt+b

 

Output Colorizer

 

输出提示的文字颜色有一些变化,方便获取关键信息

 

 

Path Intellisense

 

路径自动补全(必备)

 

Prettier

 

格式化JavaScript / TypeScript / CSS 。

 

Project Manager

 

工程项目过多时,shift+cmd+p(shift+ctrl+p) 然后输入project,第一次选择edit Project编辑自己的工程项目,之后就可以直接选择open打开你的项目

 

Sass

 

写 sass 必备

 

vscode-faker

 

生成假数据,地址,电话,图片等等

 

 

打开方式shift+cmd+p(shift+ctrl+p)) 然后输入faker 就可以选择了

 

Quokka.js

 

实时观看 javascript 的变量的变化

 

 

使用:先shift+cmd+p (ctrl+shift+p)输入 quokka 选择 new javascript 就行了😀

 

Regex Previewer

 

测试正则的插件

 

 

TSLint

 

检查typescript编程时的语法错误语法

 

TypeScript Importer

 

自动搜索工作区文件中的TypeScript定义,并将所有已知符号作为完成项,以允许代码完成。

 

 

vscode-icons

 

目录树图标

 

react

 

React-Native/React/Redux snippets for es6/es7

 

react代码片段,下载人数超多😉

 

react-beautify

 

格式化 javascript, JSX, typescript, TSX 文件

 

vue

 

vetur

 

语法高亮、智能感知

 

VueHelper

 

vue代码片段

 

Vue TypeScript Snippets

 

vue的 typescript 代码片段

 

Vue 2 Snippets

 

vue 2代码片段

 

主题

 

Dracula Official

 

个人最喜欢的主题,应该是最好看的主题之一😀

 

 

One Dark Pro

 

这个也好看😄

 

 

Atom One Dark Theme(老版本)

 

这个和 One Dark Pro差不多,One Dark Pro颜色主题多一些

 

 

One Monokai Theme

 

 

Eva Theme

 

里面包含黑色和白色主题,这个白色主题感觉挺好看的

 

 

 

Boxy Theme Kit

 

 

(转自:https://segmentfault.com/a/1190000011779959?utm_source=tag-newest

3、

4、

5、

6、

 

posted @ 2019-09-28 10:00  鸣人卷~~  阅读(291)  评论(0编辑  收藏  举报