Auto Close Tag ——— 自动闭合HTML/XML标签
Auto Rename Tag——– 自动完成另一侧标签的同步修改
background —— 背景
Bracket Pair Colorizer
——– 给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色Beautify ——- 格式化代码
Beautify css/sass/scss/less — 代码高亮
Sass
—— sass/scss文件语法提示CSS Peek —— 自动查找CSS文件
color-highlight
—— 颜色代码高亮插件Debugger for Chrome ——— 映射vscode上的断点到chrome上,方便调试
Easy Sass ——– scss编译成css,min.css(不错的一个sass编译工具)
Easy WXLESS — 微信小程序WXSS文件专用,保存可自动生成并同步编译成同名css文件
ESLint
—— js语法纠错,可以自定义配置,不过配置较为复杂,建议使用网上一些广泛使用的eslint配置File Peek — 鼠标移到路径名按住ctrl可打开文件
Open-In-Browser
—— scode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及SafarGit History — git log
GitLens —— 方便查看git日志,git重度使用者必备
HTML Class Suggestions — 类名命名提示
HTML CSS Support —— 智能提示CSS类名以及id
HTML Snippets —— 智能提示HTML标签,以及标签含义
Indenticator — 缩进高亮
IntelliSense for CSS class names — CSS类名智能命名提示
JavaScript(ES6) code snippets ——- ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
JavaScript (ES6) code snippets — JS语法提示
JavaScript Snippet Pack — 代码片段(Tab或者Enter补全),Console命令,DOM — 文档对象模型,Loop,Function,Timer,NodeJS,BDD,Misc
jQuery Code Snippets
—— jQuery代码智能提示JS-CSS-HTML Formatting
—— js-css-html格式化Live Server — http服务器(相当于使用nodejs的http-server,首选项-设置-用户设置可配置更改端口:”liveServer.settings.port”: 8999)
Markdown Preview Enhanced
—— 实时预览markdown,markdown使用者必备markdownlint
—— markdown语法纠错Material Icon Theme
—— 个人认为最好的vscode图标主题,支持更换不同色系的图标,值得点出的是,该插件更新极其频繁,基本和vscode更新频率保持一致npm — 运行npm命令
npm Intellisense — 导入模块时,提示已安装模块名称
OneDark-Pro — Atom’s ionic主题(首选项-颜色主题修改主题)
Output Colorizer — 彩色输出信息
Path Intellisense —— 自动提示文件路径,支持各种快速引入文件
Prettier-Code formatter — 代码格式化(四个空格缩进:”prettier.tabWidth”: 4)
px2rem — px值转rem
React/Redux/react-router Snippets
——- React/Redux/react-router语法智能提示stylelint — CSS/SCSS/LESS检查工具
(首选项-设置-用户设置配置:
“stylelint.enable”: true,
“css.validate”: false,
“scss.validate”: false
)SVG Viewer — 预览SVG图片
Vetur —– Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。
Visual Studio Code Format
—— vscode代码格式增强工具(右键格式化)VSCode Great Icons — 文件图标(首选项-文件图标主题修改)
VSCode-Element-Helper — elementUI语法提示高亮
- vue — Vue语法高亮(
首选项-设置-用户设置配置:
“emmet.syntaxProfiles”: {
“vue-html”: “html”,
“vue”: “html”
}) Vue 2 Snippets — 基于最新的 Vue 官方语法高亮文件添加了语法高亮,并且依据 Vue 2 的 API 添加了代码补全
Vue Peek — 查找vue组件文件
VueHelper — vue代码提示插件,包括了vue2所有api,vue-router2和vuex2的代码提示
首选项-设置-用户设置配置:
小程序语法高亮:
“files.associations”: {
“*.vue”: “vue”,
“*.wpy”: “vue”,
“*.wxml”: “html”,
“*.wxss”: “css”
}
个人习惯配置:
“editor.lineHeight”: 26, // 行高
“editor.fontSize”: 16, // 字体
“editor.wordWrap”: “on” // 自动换行
“editor.formatOnSave”: true // 保存自动格式化代码
vscode 插件
最新推荐文章于 2024-08-06 08:13:56 发布