2022最新 VSCode 前端插件推荐

当前位置: 首页 » 文章 » 2022最新 VSCode 前端插件推荐

分类: 文章 466阅读阅读模式

常规开发综合推荐

indent-rainbow

  • 插件名: oderwat.indent-rainbow
  • 功能:彩虹缩进

Code Spell Checker

  • 插件名: streetsidesoftware.code-spell-checker
  • 功能:检查单词拼写是否错误

Trailing Spaces

  • 插件名: shardulm94.trailing-spaces
  • 功能:高亮多余的空白

SVG

  • 插件名: jock.svg
  • 功能:svg编辑、高亮、格式化、预览

koroFileHeader

  • 插件名: OBKoro1.korofileheader
  • 功能:用于生成文件头部注释和函数注释的插件,支持所有主流语言

Highlight Matching Tag

  • 插件名: vincaslt.highlight-matching-tag
  • 功能:当光标停留在标签时,高亮匹配的标签

Path Autocomplete

  • 插件名: ionutvmi.path-autocomplete
  • 功能:提供路径补全支持

Path Intellisense

  • 插件名: christian-kohler.path-intellisense
  • 功能:路径智能感知

Prettier - Code formatter

  • 插件名: esbenp.prettier-vscode
  • 功能:使用 prettier 格式化代码

open in browser

  • 插件名: techer.open-in-browser
  • 功能:对HTML文件支持右击打开浏览器

GitLens — Git supercharged

  • 插件名: eamodio.gitlens
  • 功能:增强了git功能,支持在代码中查看作者、修改时间等

 

Bracket Pair Colorizer 2

  • 已集成到软件

Auto Rename Tag

  • 已集成到软件

 

JS/TS综合推荐

ESLint

  • 插件名: meganrogge.template-string-converter
  • 功能:用户 TS/JS/Vue 等代码校验

Prettier ESLint

  • 插件名: rvest.vs-code-prettier-eslint
  • 功能:使用 prettier-eslint 包格式化 JavaScript 和 Typescript 代码

npm Intellisense

  • 插件名: christian-kohler.npm-intellisense
  • 功能:在导入语句中自动完成 npm 模块名称

Template String Converter

  • 插件名: meganrogge.template-string-converter
  • 功能:在字符串中输入$触发,将字符串转换为模板字符串

 

 

S/CSS综合推荐

Stylelint

  • 插件名: stylelint.vscode-stylelint
  • 功能:用于 SCSS/CSS 等代码样式校验

SCSS Formatter

  • 插件名: sibiraj-s.vscode-scss-formatter
  • 功能:用于格式化 SCSS 代码支持

 

 

Markdown综合推荐

Markdown Preview Github Styling

  • 插件名: bierner.markdown-preview-github-styles
  • 功能:预览 markdown 以匹配 GitHub 的样式

 

 

 

测试/调试综合推荐

Code Runner

  • 插件名: formulahendry.code-runner
  • 功能:一键执行各种语言代码

Quokka.js

  • 插件名: WallabyJs.quokka-vscode
  • 功能:实时显示打印输出结果

JavaScript Debugger

  • 插件名: ms-vscode.js-debug
  • 功能:用于 Node.js 程序和 Chrome 浏览器的调试

Live Server

  • 插件名: ritwickdey.LiveServer
  • 功能:为静态和动态页面启动具有实时重新加载功能的开发本地服务器

 

 

Vue 开发推荐

Vetur

  • 插件名: octref.vetur
  • 功能:开发 Vue2 必备
  • 注意:不适用于vue3开发,与volar冲突

Vue Language Features (Volar)

  • 插件名: Vue.volar
  • 功能:开发 Vue3 必备
  • 注意:不适用于vue2开发,与vetur冲突

TypeScript Vue Plugin (Volar)

  • 插件名: Vue.vscode-typescript-vue-plugin
  • 功能:开发 Vue3 必备
  • 注意:不适用于vue2开发,与vetur冲突

Vue VSCode Snippets

  • 插件名: sdras.vue-vscode-snippets
  • 功能:支持Vue2/3的代码段

 

小程序开发推荐

WXML - Language Service

  • 插件名: qiu8310.minapp-vscode
  • 功能:WXML 文件开发支持及属性智能提示

 

 

PHP开发推荐

php cs fixer

  • 插件名: junstyle.php-cs-fixer
  • 功能:基于 PHP CS Fixer 进行代码格式化、校验

PHP Debug

  • 插件名: xdebug.php-debug
  • 功能:PHP 调试适配器

PHP Intelephense

  • 插件名: bmewburn.vscode-intelephense-client
  • 功能:PHP 代码智能拓展,需要禁用原来编辑器的支持

PHP IntelliSense

  • 插件名: zobo.php-intellisense
  • 功能:对 PHP 的高级自动完成和重构支持,需要本地PHP版本大于7.4

PHP Namespace Resolver

  • 插件名: MehediDracula.php-namespace-resolver
  • 功能:导入和扩展 php 命名空间

 

 

主题类

Dracula Official

  • 插件名: dracula-theme.theme-dracula
  • 功能:YYDS的主题

Screenshot

One Dark Pro

  • 插件名: zhuangtongfa.Material-theme
  • 功能:Atom上标志性的主题

ScreenShot

vscode-icons

  • 插件名: vscode-icons-team.vscode-icons
  • 功能:文件夹&文件图标支持

 

 

其他推荐

eCSStractor for VSCode

  • 插件名: diz.ecsstractor-port
  • 功能:用于从 HTML 中提取类名并为后续工作生成 CSS 样式表

px to rem & rpx & vw (cssrem)

  • 插件名: cipchk.cssrem
  • 功能:对px和rem/rpx/vw之间的互转,更多适应于响应式或小程序开发

Auto Import

  • 插件名: steoates.autoimport
  • 功能:为所有可用的导入自动查找、解析并提供代码操作和代码完成

CSS Initial Value

  • 插件名: dzhavat.css-initial-value
  • 功能:光标停留时显示每个CSS属性的初始值

filesize

  • 插件名: mkxml.vscode-filesize
  • 功能:右下角状态栏显示当前文件大小

Word Count CJK

  • 插件名: holmescn.vscode-wordcount-cjk
  • 功能:右下角状态栏显示文字字数统计,支持中文

A-super-translate

  • 插件名: xuedao.super-translate
  • 功能:翻译识别代码中注释部分,不干扰阅读。支持不同语言,单行、多行注释、

相关文章

评论一下

暂无评论