• 技术文章 >开发工具 >VSCode

    【强推】VSCode拓展最新汇总!

    藏色散人藏色散人2021-09-26 15:00:46转载432
    下面本篇文章给大家介绍一下常用的VSCode拓展,希望对大家有所帮助!

    一、拓展

    名称

    简述

    Auto Close Tag

    自动闭合HTML标签

    Auto Import

    import提示

    Auto Rename Tag

    修改HTML标签时,自动修改匹配的标签

    Babel JavaScript

    babel插件,语法高亮

    Babelrc

    .babelrc文件高亮提示

    Beautify css/sass/scss/less

    css/sass/less格式化

    Better Align

    对齐赋值符号和注释

    Better Comments

    编写更加人性化的注释

    Bookmarks

    添加行书签

    Bracket Lens

    在闭合的括号处提示括号头部的代码

    Bracket Pair Colorizer 2

    用不同颜色高亮显示匹配的括号

    Can I Use

    HTML5、CSS3、SVG的浏览器兼容性检查

    Code Outline

    展示代码结构树

    Code Runner

    运行选中代码段(支持多数语言)

    Code Spell checker

    单词拼写检查

    CodeBing

    快速打开Bing并搜索,可配置搜索引擎

    Color Highlight

    颜色值在代码中高亮显示

    Color Info

    小窗口显示颜色值,rgb,hsl,cmyk,hex等等

    Color Picker

    拾色器

    CSS-in-JS

    CSS-in-JS高亮提示和转换

    Dash

    集成Dash

    Debugger for Chrome

    调试Chrome

    Document This

    注释文档生成

    DotENV

    .env文件高亮

    Edit csv

    编辑CSV文件

    EditorConfig for VS Code

    EditorConfig插件

    Emoji

    在代码中输入emoji

    endy

    将输入光标跳转到当前行最后面

    Error Gutters

    在行号处提示错误代码

    ESLint

    ESLint插件,高亮提示

    File Peek

    根据路径字符串,快速定位到文件

    filesize

    状态栏显示当前文件大小

    Find-Jump

    快速跳转到指定单词位置

    Font-awesome codes for html

    FontAwesome提示代码段

    ftp-sync

    同步文件到ftp

    Git Blame

    在状态栏显示当前行的Git信息

    Git File History

    快速浏览单文件历史提交变动

    Git Graph

    Git图形化视图,方便浏览和操作

    Git History(git log)

    查看git log

    Git Tree Compare

    Git树形比对,查看不同分支的差异

    gitignore

    .gitignore文件语法

    GitLens

    显示文件最近的commit和作者,显示当前行commit信息

    GraphQL for VSCode

    graphql高亮和提示

    Guides

    高亮缩进基准线

    Gulp Snippets

    Gulp代码段

    Highlight Matching Tag

    高亮匹配选中的标签

    HTML CSS Class Completion

    CSS class提示

    HTML CSS Support

    css提示(支持vue)

    HTMLHint

    HTML格式提示

    htmltagwrap

    快捷包裹html标签

    htmltagwrap

    包括HTML

    Import Beautify

    import分组、排序、格式化

    Import Cost

    行内显示导入(import/require)的包的大小

    Indenticator

    缩进高亮

    IntelliSense for css class names

    css class输入提示

    JavaScript (ES6) code snippets

    ES6语法代码段

    JavaScript Standard Style

    Standard风格

    Jest Runner

    支持执行Jest单个测试文件或单个用例

    JS Refactor

    代码重构工具,提取函数、变量重命名等等

    JSON to TS

    JSON结构转化为typescript的interface

    JSON Tools

    格式化和压缩JSON

    jumpy

    快速跳转到指定单词位置

    language-stylus

    Stylus语法高亮和提示

    Less IntelliSense

    less变量与混合提示

    Lodash

    Lodash代码段

    Log Wrapper

    生产打印选中变量的代码

    markdownlint

    Markdown格式提示

    MochaSnippets

    Mocha代码段

    Node modules resolve

    快速导航到Node模块

    npm

    运行npm命令

    npm Intellisense

    导入模块时,提示已安装模块名称

    Output Colorizer

    彩色输出信息

    Partial Diff

    对比两段代码或文件

    Parameter Hints

    在函数调用处指示参数名称

    Path Autocomplete

    路径完成提示

    Path Intellisense

    另一个路径完成提示

    Polacode

    将代码生成图片

    PostCss Sorting

    css排序

    Prettier - Code formatter

    prettier官方插件

    Prettify JSON

    格式化JSON

    Project Manager

    快速切换项目

    Quokka.js

    不需要手动运行,行内显示变量结果

    Rainbow CSV

    CSV文件使用彩虹色渲染不同列

    React Native Storybooks

    storybook预览插件,支持react

    React Playground

    为编辑器提供一个react组件运行环境,方便调试

    React Standard Style code snippets

    react standar风格代码块

    REST Client

    发送REST风格的HTTP请求

    Sass

    sass插件

    Settings Sync

    VSCode设置同步到Gist

    Sort lines

    排序选中行

    Sort Typescript Imports

    typescript的import排序

    String Manipulation

    字符串转换处理(驼峰、大写开头、下划线等等)

    stylelint

    css/sass/less代码风格

    SVG Viewer

    SVG查看器

    Syncing

    vscode设置同步到gist

    Test Spec Generator

    测试用例生成(支持chai、should、jasmine)

    TODO Parser

    Todo管理

    Todo Todo Tree

    收集代码中的TODO注释,支持快速搜索

    Toggle Quotes

    切换JS中的引号," -> ' -> `

    TS/JS postfix completion

    ts/js后缀提示

    TSLint

    TypeScript语法检查

    Types auto installer

    自动安装@types声明依赖

    TypeScript Hero

    TypeScript辅助插件,管理import、outline等等

    TypeScript Import

    TS自动import

    TypeScript Import Sorter

    import整理排序

    Typescript React code snippets

    React Typescript代码段

    TypeSearch

    TS声明文件搜索

    Version Lens

    package.json文件显示模块当前版本和最新版本

    vetur

    Vue插件

    Volar

    Vue插件,支持Vue3

    View Node Package

    快速打开选中模块的主页和代码仓库

    Visual Studio IntelliCode

    基于AI的代码提示

    VS Live Share

    实时多人协助

    VSCode Great Icons

    文件图标拓展

    vscode-database

    操作数据库,支持mysql和postgres

    vscode-icons

    文件图标,方便定位文件

    vscode-random

    随机字符串生成器

    vscode-spotify

    集成spotify,播放音乐

    vscode-styled-components

    styled-components高亮支持

    vscode-styled-jsx

    styled-jsx高亮支持

    Vue Peek

    支持跳转到Vue组件定义文件

    Vue TypeScript Snippets

    Vue Typescript代码段

    VueHelper

    Vue2代码段(包括Vue2 api、vue-router2、vuex2)

    Wallaby.js

    实时测试插件

    Wrap Console Log Lite

    对选中代码快速console.log

    二、主题


    名称

    预览

    Atom One Light Theme

    009b93e276d83c8e9b37e17dc7fcc45.png


    bluloco-dark

    dab274c4f2610ca85199c01d2c5bcc3.png

    bluloco-light


    Enki Theme

    626e2620207d6d0e7be7d4ff58def73.png


    eppz! (C# theme for Unity)


    Eva Theme


    Flat UI

    bbb08755dd754dbca81b23e7ab90ad3.png

    GitHub Theme

    2d0fbbe4ae9ac6e5b13aec0966c405b.png

    Monokai Pro


    New Moon VSCode


    One Dark Pro


    Plastic


    spacegray-vscode

    e96975282134e1e7d6618e7c82baab4.png

    Splus

    6126327ea79fa0093477e4cead7d4dd.png

    三、个人首选项配置(仅供参考)

    {  "breadcrumbs.enabled": true,  "editor.tabSize": 2,  "editor.renderWhitespace": "boundary",  "editor.cursorBlinking": "smooth",  "editor.minimap.renderCharacters": false,  "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",  "editor.fontLigatures": true,  "explorer.confirmDragAndDrop": false,  "extensions.autoUpdate": false,  "files.insertFinalNewline": true,  "git.autofetch": true,  "git.path": "F:\\Program Files\\Git\\cmd\\git.exe",  "search.exclude": {    "**/node_modules": true,    "**/dist": true
      },  "typescript.locale": "en",  "window.titleBarStyle": "custom",  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",  "window.zoomLevel": 1,  "workbench.activityBar.visible": true,  "workbench.colorTheme": "Plastic - deprioritised punctuation",  "workbench.iconTheme": "vscode-great-icons",  "workbench.startupEditor": "newUntitledFile",  "eslint.autoFixOnSave": true,  "eslint.validate": ["javascript", "javascriptreact", "vue"],  "vsicons.projectDetection.autoReload": true,  "vsicons.dontShowNewVersionMessage": true,  "tslint.autoFixOnSave": true,  "debugwrapper.wrappers": {    "default": "console.log('$eSEL', $SEL)"
      },  "prettier.tslintIntegration": true,  "cSpell.userWords": [    "Unmount"
      ],  "jest.autoEnable": false,
    }

    以上就是【强推】VSCode拓展最新汇总!的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:toutiao,如有侵犯,请联系admin@php.cn删除
    专题推荐:VSCode
    上一篇:怎么使用 VSCode 调试浏览器上的的 JS 代码 下一篇:vscode能用uni-app吗
    大前端线上培训班

    相关文章推荐

    • vscode中怎么进行微信小程序的发布(步骤详解)• 浅析VSCode中调试Node.js的方法• 10个好看的 VSCode 主题,值得收藏!• 了解VSCode中的snippets,看看怎么提高开发效率!• 怎么使用 VSCode 调试浏览器上的的 JS 代码

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网