常用插件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 版)😁 Debugger for Chrome让 vscode 映射 chrome 的 debug功能,使静态页面都可以用 vscode 来打断点调试 简单使用:戳我 Document This添加注释块 设置:
快捷键: 按两次Ctrl+alt+d ESLintEsLint可以帮助我们检查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 Lensgit 日志插件 HTML CSS Support在 html 标签上写class 智能提示当前项目所支持的样式(必备) HTML Snippetshtml 代码片段(必备) htmlhinthtml代码检测 htmltagwrap可以在选中HTML标签中外面套一层标签 使用:选择一大段代码,然后按“Alt + W” Indenticator突出目前的缩进深度 IntelliSense for CSS class names智能提示 css 的 class 名 Image Preview鼠标移到路径里显示图像预览 JavaScript (ES6) code snippetses6代码片段(必备) JavaScript Snippet Packjs代码片段(必备) jQuery Code SnippetsjQuery 代码片段 Live Sass Compiler实时编译 sass ,不过需要配置,附上我的配置
使用 markdownlintmarkdown 语法检查 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目录树图标 reactReact-Native/React/Redux snippets for es6/es7react代码片段,下载人数超多😉 react-beautify格式化 javascript, JSX, typescript, TSX 文件 vuevetur语法高亮、智能感知 VueHelpervue代码片段 Vue TypeScript Snippetsvue的 typescript 代码片段 Vue 2 Snippetsvue 2代码片段 主题Dracula Official个人最喜欢的主题,应该是最好看的主题之一😀 One Dark Pro这个也好看😄 Atom One Dark Theme(老版本)这个和 One Dark Pro差不多,One Dark Pro颜色主题多一些 One Monokai ThemeEva Theme里面包含黑色和白色主题,这个白色主题感觉挺好看的 Boxy Theme Kit大家还有什么好的插件推荐吗🤓 |
|