zoukankan      html  css  js  c++  java
  • 全栈工程师-史上最强VSCODE插件-提高开发效率

    当你点进来的时候 ,你可能是被标题吸引进来的,也有可能是 偶然间,看到的,首先恭喜你,已经准备好向全栈开发工程师靠近 ,那我们不说废话,直接开始,咱们先从安装步骤开始讲起 ,因为有些人连插件在哪都不知道

    记得点关注哦 !防止迷路

    VSCODE 插件安装步骤 :

    这里我们开始以 VSCode Icons.为例,有点基础的,麻烦跳过。。。。。

    一、安装拓展
    在这里插入图片描述
    拓展插件如上图所示。

    首先VScode 打开之后是这样的
    在这里插入图片描述然后我们点击 这里
    在这里插入图片描述要是上面这里你都找不到的话,大哥你退圈把,不适合做程序员 哈哈

    安装拓展步骤:点击左边拓展项=>搜索VSCode Icons拓展=>点击安装=>重新加载在这里插入图片描述二 、 配置
    步骤:文件=>首先项=>文件图标主题=>选中VSCode Icons
    在这里插入图片描述在这里插入图片描述

    插件之-主题篇

    1. Material Theme

    在这里插入图片描述
    一款深海主题 评分: 4星

    一个简单而又干净的主题。这里有很多配置选项,用于颜色配置,可以让我们在工作之余减少疲劳 ,还有许多色系进行选择

    效果如下:在这里插入图片描述

    在这里插入图片描述


    2. Panda Theme

    在这里插入图片描述 一款熊猫主题 评分 : 4.5 星

    暗语法主题,熊猫语法主题具有微妙的色彩,使您的眼睛易于使用,越看越舒服

    效果如下:
    在这里插入图片描述


    3. Cobalt2 Theme Official

    在这里插入图片描述 Wes Bos 主题 评分 4.5 星

    官方 Wes Bos 主题。 如果你知道他来自 Wes Bos ,那么你应该知道他的质量。我喜欢它。

    效果如下 :

    在这里插入图片描述

    4. Dracula Official

    吸血鬼主题 评分 5 星

    这个主题中使用的配色方案可以让人感到平静。暗紫色的色调是这个主题与其他主题与众不同的地方。

    在这里插入图片描述效果如下 :
    在这里插入图片描述

    插件之-图标篇

    安装一个强大的主题还是不够的,你需要一组漂亮的图标来满足你的视觉体验。这就是为什么我会为你推荐两个最受欢迎的主题图标的原因。

    1. vscode-icons

    在这里插入图片描述
    首先为了我们在编码时有一个高效、易用的界面,我们需要对一些不明了的组件做一些美化。

    vscode-icons 插件可以实现对各种文件类型的文件前的图标进行优化显示,这样我们在查看长长的文件列表的时候,可以直接通过文件的图标就可以快速知道文件的类型,而不是去看文件的后缀。
    效果如下:
    在这里插入图片描述

    2. Material Icon Theme

    在这里插入图片描述

    这个图标看上去简洁,就是一个安装电线的工人穿的那种衣服一样干净,不做评价各有优势

    效果如下 :

    在这里插入图片描述

    VSCode Great Icons

    在这里插入图片描述> 用于扩展文件图标,词盲了,插件各有千秋

    效果如下 :
    在这里插入图片描述

    插件之 前端 常用篇

    这篇的插件有点多,但是建议大家还是一次性全部安装,大部分,如果你已经安装过,那证明你是一个优秀的前端程序员了

    vetur

    官网下载地址 : Vetur
    在这里插入图片描述

    目前比较好的Vue语法高亮


    Auto Close Tag

    官网下载地址 : Auto Close Tag

    在这里插入图片描述

    自动闭合HTML标签 ,如果没有他,你的代码会疯,那个 Shift + > 符号


    Vue 2 Snippets

    官网下载地址 : Vue 2 Snippets
    在这里插入图片描述

    Vue2 片段补全工具

    Auto Rename Tag

    官网下载地址 : Auto Rename Tag

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


    ESLint

    在这里插入图片描述
    官网下载地址 : ESLint

    ESLint插件,高亮提示


    HTML CSS Support

    官网下载地址 :HTML CSS Support
    在这里插入图片描述

    css提示(支持vue)


    JavaScript (ES6) code snippets

    官网下载地址 : JavaScript (ES6) code snippets
    在这里插入图片描述

    ES6语法代码段


    CodeBing

    官网下载地址 :CodeBing
    在这里插入图片描述

    在VSCode中弹出浏览器并搜索,可编辑搜索引擎


    Codelf 在这里插入图片描述

    这款插件是我最喜欢的 ,所以标红啦 ,假设你在写项目的时候,遇到变量的命名的问题,你可以把中文输入在上面,它会去Github检索,所有开源仓库中那些大牛是这么命名的,如果你不喜欢插件,它官网更神奇 ,看下图
    牛X克拉斯!

    网页地址 :官网
    在这里插入图片描述

    Quokka

    在这里插入图片描述

    Quokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈。它易于配置,并能够预览变量的函数和计算值结果。另外,在使用 JSX 或 TypeScript 项目中,它能够开箱即用。说人话就是,可以随时预览值

    插件之 Java开发 篇

    你没看错如果使用过 ideaeclipse或者 Spring公司的第三方 工具 Spring Tool ,你就会发现 特别多的人用,而这个时候,你又想一个小众且不失优雅的 IDE , VSCode 会是个神奇的选择

    • 下面我们来看看Java需要的插件
      在这里插入图片描述
    • Language Support for Java™ by Red Hat
    • Debugger for Java
    • Java Test Runner
    • Maven for Java
    • Java Dependency Viewer

    Install the Java Extension Pack

    上面的几个是必备的,下面的可选的:

    There are also other popular Java extensions you can pick for your own needs, including: 意思就是 官网推荐 使用下面插件开发Java

    下面就是效果图在这里插入图片描述

    这个时候有同志说了 ,老子用来这么久Eclipse,好不容易适应了IDEA的快捷键, 你的意思是我还得重新在学一遍快捷键呗,
    > 用你个鬼 VScode 真烂

    在这里插入图片描述

    让我来看看鬼才插件开发者 开发的这俩款插件,解决你的问题

    • Eclipse Keymap for Visual Studio Code. (eclipse快捷键,eclipse用户最爱)
    • IntelliJ IDEA Keybindings(IDEA的快捷键,满足你的一切要求)

    作为全栈工程师, 下面就是我开发多年总结的实用插件,分享给大家,不用全部安装,按需要安装, 例如美工需要 拾色器 就可以安装 Color Picker 拾色器,插件的使用方法,官网有图介绍,只要你看得懂1+1 就能看懂官网图

    • Code Runner 运行选中代码段(支持大量语言,包括Node)

    • Color Highlight 颜色值在代码中高亮显示

    • Color Picker 拾色器

    • Document This 注释文档生成

    • EditorConfig for VS Code EditorConfig 插件

    • Emoji在代码中输入emoji

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

    • Font-awesome codes for html FontAwesome提示代码段

    • ftp-sync 同步文件到ftp

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

    • Git History(git log) 查看git log

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

    • Guides 高亮缩进基准线

    • Gulp Snippets Gulp 代码段

    • HTML CSS Class Completion CSS class 提示

    • HTMLHint HTML 格式提示

    • Indenticator 缩进高亮

    • language-stylus Stylus语法高亮和提示

    • Lodash Lodash 代码段

    • markdownlint Markdown格式提示

    • MochaSnippets Mocha代码段

    • Node modules resolve 快速导航到Node模块

    • npm 运行npm命令

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

    • Output Colorizer 彩色输出信息

    • Partial Diff 对比两段代码或文件

    • Path Autocomplete 路径完成提示

    • Path Intellisense另一个路径完成提示

    • Prettify JSON格式化JSON

    • Project Manager 快速切换项目

    • REST Client 发送REST风格的HTTP请求

    • Settings Sync VSCode 设置同步到Gist

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

    • Test Spec Generator 测试用例生成(支持chai、should、jasmine)

    • change-case 切换不同的 命名风格 例如 驼峰 、首字母

    Prettier - Code formatter

    在这里插入图片描述

    这个插件 用于我们代码的格式化 支持
    JavaScript · TypeScript · Flow · JSX · JSON
    CSS · SCSS · Less
    HTML · Vue · Angular
    GraphQL · Markdown · YAML 等多种文件格式化


    Live Server

    在这里插入图片描述

    这东西是我最喜欢的,当我们修改代码的时候,他可以不需要刷新 ,实时更新

    使用方法 右键
    在这里插入图片描述然后 VSCode中去, 点击Go Live,就可以了

    准备来说,没有 VsCode 做不到的事情,甚至在VSCode里面看视频,听音乐
    下面我们就来说说 怎么听音乐

    在这里插入图片描述

    VSC Netease Music

    在这里插入图片描述

    我这里就不讲,怎么使用了,大家自己去看 使用方法

    最后谢谢大家的观看,记得点关注防止迷路

  • 相关阅读:
    洛谷 P2922 [USACO08DEC]秘密消息Secret Message
    HDU 1542 Atlantis
    洛谷 P2146 软件包管理器
    rabbitmq
    POJ——T2446 Chessboard
    洛谷—— P3375 【模板】KMP字符串匹配
    洛谷——P3370 【模板】字符串哈希
    POJ——T1860 Currency Exchange
    洛谷—— P3386 【模板】二分图匹配
    python(1)- 初识python
  • 原文地址:https://www.cnblogs.com/spiritmark/p/13009658.html
Copyright © 2011-2022 走看看