悠悠楠杉
VSCode实用插件
一、必备插件(web前端/PHP)
Chinese
(中文)
HTML Snippets
(代码提示)
HTML CSS Support
(智能提示CSS类名以及id)
Auto Close Tag
(自动闭合标签)
Auto Rename Tag
(自动重命名 HTML 标签的开始和结束标签)
CSS Peek
(选择某个 class 或者 id 名称按住Ctrl键+鼠标左键可以直接定位到该名称的CSS的位置)
Markmap
(思维导图神器,.md文档编辑窗口的右上角就会多一个预览的图标Open as markmap,当然也可手动打开命令面板,输入Open as markmap)
css-auto-prefix
(自动添加 CSS 私有前缀)
JavaScript (ES6) code snippets
(智能提示与快速输入)
jQuery Code Snippets
(jQuery代码智能提示)
px to rem & rpx & vw (cssrem)
(px转换成rem,Font Size:填写设计稿的宽度/10)
需要在head引用lib-flexible:https://zhizun.lanzouy.com/iq8cDzuud2f
<script>
if(window.screen.width >= 850){// 设置最大的字体大小,PC端显示,放到head
document.getElementsByTagName('html')[0].style.fontSize = '85px';
}
</script>
PHP Intelephense
(PHP代码提示工具)
open in browser
(快速打开html文件到浏览器预览)
Prettier - Code formatter
(文件格式化,可配置自动格式化)
Vetur
(官方钦定Vue插件)
Vue Language Features
(默认的vue文件在vs code里全部是一样的文字,且不能点击。该插件让vue文件的内容有了颜色区分,同时支持点击相对路径文件的跳转)
二、效率神器
Bracket Pair Colorizer
(括号做颜色区分)
Browser Preview
(VSCode里面打开浏览器)
REST Client
(接口调试)
Partial Diff
(文件比较)
Npm Intellisense
(自动完成导入语句中的npm模块)
Path Intellisense
(快速引入文件)
Color Highlight
(设置 CSS 颜色的样式)
Project Dashboard
(项目仪表板插件)
CodeSnap
(代码截图插件)
Path Autocomplete
(路径自动完成)
IntelliCode
(提供智能的代码建议,默认支持 Python、TypeScript/JavaScript、React 和 Java)
ES7 React/Redux/GraphQL/React-Native snippets
(语法智能提示,React 开发者必备)
Live SASS Compiler
(可以将 SASS 或 SCSS 文件实时编译或转译为 CSS 文件)
Remote-SSH
(SSH 服务器的远程机器作为开发环境)
Debugger for chrome
(微软开发的插件,调试 JS 代码,可以设置断点、逐步执行代码、调试动态添加的脚本等)
Live Server
(实时加载功能的小型服务器)
Minify
(压缩html、css、js文件,安装后按F1再输入Minify)
Regex Previewer
(实时预览正则表达式的效果)
HTML Boilerplate
(一键生成 HTML 模板)
wakatime
(编程时间及行为跟踪统计)
any-rule
(常用正则大全)
Image preview
(预览图片)
Tabnine
(多语言的插件,自动完成代码的输入)
Settings Sync
(配置同步到云端,登录账号也会同步扩展)
Codelf
(提供很多建议的命名,选中文本再右键点击Codelf)
Highlight Matching Tag
(突出显示匹配的开始和/或结束标签)
Turbo Console Log
(快速添加 console.log 信息,js debug 必备,ctrl + alt + l 选中变量之后,使用这个快捷键生成 console.log,alt + shift + c 注释所有 console.log,alt + shift + u 启用所有 console.log,alt + shift + d 删除所有 console.log)
Sort lines
(对当前文本排序)
Data Preview
(预览数据文件)
三、Git集成
GitHub Pull requests
( 查看和管理GitHub拉取请求和问题)
Git Graph
(Git 图形化显示和操作)
GitLens
(快速查看更改行或代码块的对象)
GitHistory
(可查看和搜索git日志以及图形和详细信息)
四、美化
GitHub Theme
(黑白两款皮肤)
vscode-icons
(漂亮的目录树图标主题)
Better Align
(代码优雅排版)
Better Comments
(丰富注释颜色)
vscode-json
(处理 JSON 文件)
Prettier
(格式化插件支持React)
Material Theme
(集成了多种主题皮肤)
Material Icon Theme
(扁平化的主题图标库)
Beautify
(右键鼠标一键格式化)
五、代码规范
change-case
(变量命名规范)
JavaScript Booster
(代码改进)
ESlint
(严谨的规范书写)
TSLint
(书写规范)
Code Spell Checker
(拼写检查程序)
koroFileHeader
(生成文件头部注释和函数注释)
Error Lens
(代码检查(错误、警告、语法问题)进行突出显示)
EditorConfig for VS Code
(代码风格统一)
六、装X神器
Markdown All in One
(书写Markdown)
vscode-drawio
(画流程图)
Polacode-2020
(转化成一张逼格满满的图片)
Live Share
(与他人实时进行协作式编辑和调试)
Markdown Preview Enhanced
(在 VSCode 里编写 Markdown,支持预览)