VSCode提高 Node 和 Vue 开发效率的插件推荐

在众多代码编辑工具中,我最喜欢的就是微软的vscode。首先它十分轻便,不吃硬件,运行非常顺畅;其次是其各种各样的插件使得编程效率蹭蹭地往上提,爸爸妈妈再也不用担心我要加班了(才怪!!!不加班是不可能的)

插件列表

Auto Close Tag 自动闭合HTML标签

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

Bookmarks 添加行书签

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

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

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

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

Color Picker 拾色器

Document This 注释文档生成

EditorConfig for VS Code EditorConfig 插件

Emoji 在代码中输入emoji

ESLint ESLint插件,高亮提示

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提示

HTML CSS Support css提示(支持vue)

HTMLHint HTML格式提示

Indenticator 缩进高亮

JavaScript (ES6) code snippets ES6语法代码段

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)

TODO Parser Todo管理

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

vetur 目前比较好的Vue语法高亮

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

vscode-icons 文件图标,方便定位文件

VSCode Great Icons 文件图标拓展

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

附录:VSCode首选项配置

{
"editor.tabSize": 2,
"files.associations": {
"*.vue": "vue"
},
"eslint.autoFixOnSave": true,
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
"eslint.validate": [
"javascript",
"javascriptreact",
"vue",
"vue-html"
],
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/dist": true
},
"emmet.syntaxProfiles": {
"javascript": "jsx",
"vue": "html",
"vue-html": "html"
},
"extensions.autoUpdate": true,
"editor.renderWhitespace": "boundary",
"editor.cursorBlinking": "smooth",
"workbench.welcome.enabled": true
}

到此这篇关于VSCode提高 Node 和 Vue 开发效率的插件推荐的文章就介绍到这了,更多相关VSCode插件推荐内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vsCode安装使用教程和插件安装方法

    vsCode安装使用教程vsCode是什么vsCode安装vsCode汉化vsCode常用命令说明vsCode左边图标说明vsCode基本使用前端常用插件在vosCode中显示html界面 vsCode是什么 Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮.智能代码补全.自定义热键.括号匹配.代码片段.代码对比 Diff.GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化.软

  • 推荐VSCode 上特别好用的 Vue 插件之vetur

    Vue自从发布以来就一直受到前端开发人员的热爱,而除了一些本身优秀的特征之外,还有就是丰富的插件和工具的支持和更新.虽然现在的编辑器需要安装相应的plugins才能进行Vue组件化开发,但是越来越多优秀的plugins都提供了强大的支持.比如VSCode下面的Vetur就是这样一款必备的Vue开发工具.下面就开始介绍一下它的一些功能吧 Github仓库:Vetur 官方文档:Vetur文档 语法高亮 Vetur支持.vue文件的语法高亮显示,除了支持template模板以外,还支持大多数主流的前

  • vscode 远程调试python的方法

    本文介绍了vscode 远程调试python的方法,分享给大家,具有如下: 实验环境 远程服务器:京东云,1核2G,centos7.3 64bit 本地环境配置 安装vscode,实验用的版本是1.10.2 vscode配置python插件,实验用的python插件版本是0.7.0 vscode配置python远程调试环境 在.vscode文件夹新建一个launch.json文件,然后填写下面的代码 { "version": "0.2.0", "confi

  • VSCode下好用的Python插件及配置

    MS Python插件. 这是微软官方的Python插件,已经自带很多功能.下面是插件功能描述,其中部分内容我做了翻译. a)        Linting (Prospector, Pylint, pycodestyle, Flake8, pylama, pydocstyle, mypy with config files and plugins)静态代码扫描(可以理解为代码语法和格式错误提示,支持多种linter) b)       Intellisense (autocompletion

  • 详解vscode中vue代码颜色插件

    vue提示插件[Vscode] 编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了. 在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue,vue-beautify,vue-color,VueHelper,vertur等等.比较了下载数量可以了解到,vetur 是目前比较好的语法高亮插件,我们来安装一下吧. vscode提

  • vscode常用插件整理汇总

    1.auto close tag HTML自动补全标签 2.beautiful UI 32个主题集合,具体使用看个人喜好. 3.better comments 通过使用警报.信息.待办事项等注释来改进代码注释! 4.bracket pair colorizer 2 用于对匹配括号上色的可自定义扩展 5.code spell checker 对基本关键字拼写校验 6.color info 提供有关CSS颜色的快速信息 7.ESLint 借助 ESLint,可将 静态代码分析 和 问题代码协助修复

  • VsCode插件开发之插件初步通信的方法步骤

    参考了Egret Wing,想像Egret Wing那样在上方titlebar最右边上面增加一个menu(这个menu相对于一个按钮,当点击这个按钮时会出现一个window弹框,这个window弹框里就包含相关的表单信息以供登录或者注册使用.我是以这个作为参考模板的.但是目前进展并不是很顺.于是我通过插件的方式暂时性解决了这个问题.但是觉得还不是想要的那样. Egret Wing是这样的,如图所示: 不得不承认一点Egret Wing改造的挺不错的,不愧是对VsCode进行魔改. 今天先说一下通

  • VsCode插件整理(小结)

    1.VsCode官方插件地址: https://marketplace.visualstudio.com/vscode http://code.visualstudio.com/docs 官网下载地址:http://code.visualstudio.com/ 2.使用方法,可以在官网中搜索需要的插件或者在VsCode的""扩展""中搜索需要的插件 添加方法使用Ctrl+P, 输入 ext install xxxx ,搜索要安装的插件,点击安装按钮即可 3.常用插件

  • VSCode提高 Node 和 Vue 开发效率的插件推荐

    在众多代码编辑工具中,我最喜欢的就是微软的vscode.首先它十分轻便,不吃硬件,运行非常顺畅:其次是其各种各样的插件使得编程效率蹭蹭地往上提,爸爸妈妈再也不用担心我要加班了(才怪!!!不加班是不可能的) 插件列表 Auto Close Tag 自动闭合HTML标签 Auto Rename Tag 修改HTML标签时,自动修改匹配的标签 Bookmarks 添加行书签 Can I Use HTML5.CSS3.SVG的浏览器兼容性检查 Code Runner 运行选中代码段(支持大量语言,包括N

  • Visual Studio 2010 前端开发工具/扩展/插件推荐

    怎么样让Visual Studio更好地编写HTML5, CSS3, JavaScript, jQuery,换句话说就是如何更好地做前端开发.Visual Studio 2010不管是旗舰版还是免费版都没有对前端开发方面做充分的优化.不要希望VS默认安装这些东西,我们有很多VS的扩展可是使用. 这里列出的大多数扩展都可以使用Extension Manager (Tools > Extension Manager)来安装,你可以通过Visual Studio Gallery网站下载这些扩展. We

  • 详解基于Wepy开发小程序插件(推荐)

    开发 wepy-plugin-autopages 使用 wepy 开发项目时不需要手动配置 app.wpy 下的 config.pages,autopages 插件会自动监控 pages 目录下文件的变化,自动生成更新对应 app.json 下的 pages. 注意:该插件只会对编译文件dist里配置添加,源文件是不会改动的. 注意:我还发现有个问题是他是按命名顺序添加的,所以开发阶段可以用客户端指定路径,但是发布的话还是乖乖手动添加吧 这插件看情况使用吧,如果是个人项目的话我觉得还是值得用的,

  • VSCode Vue开发推荐插件和VSCode快捷键(小结)

    首先这几个是VSCode推荐Vue开发必备的插件 Vetur -- 语法高亮.智能感知.Emmet等 包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着) EsLint -- 语法纠错 Debugger for Chrome -- 映射vscode上的断点到chrome上,方便调试(配置有点麻烦,其实我没用这个) Auto Close Tag -- 自动闭合HTML/XML标签 Auto Rename Tag -- 自动

  • VsCode工具开发vue项目必装插件清单(推荐!)

    目录 1.概述 2.VsCode插件清单 2.1.Vetur插件让vue文件代码高亮 2.2.Vue VSCode Snippets自动生成vue模板内容插件 1.安装插件 2.使用插件生成vue模板代码 2.3.LiveServer实时刷新网页 1.安装LiveServer 2.使用LiveServer打开网页 3.开启自动保存 2.4.开发工具设置2个空格缩进 2.5.browser插件浏览器插件查看html文件 1.安装创建 2.浏览html文件 2.6.设置目录分级显示 2.7.Brac

  • SpringBoot和Swagger结合提高API开发效率

    现在Web开发越来越倾向于前后端分离,前端使用AngularJS,React,Vue等,部署在NodeJS上,后面采用SpringBoot发布Rest服务,前后端进行分离.这样的架构灵活且特别适合大型团队的协作开发. 那么问题来了,因为前端都是和后端通过API进行交互的,那么前后端的Rest API的接口如何进行定义和沟通呢?首先想到的应该就是Swagger. 那么什么是Swagger,Swagger™的目标是为REST APIs 定义一个标准的,与语言无关的接口,使人和计算机在看不到源码或者看

  • 浅谈Vue开发人员的7个最好的VSCode扩展

    在Visual Studio中添加正确的VS Code扩展可以让你作为开发者的生活变得更加轻松. 它们可以帮助格式化.可伸缩性.强制执行最佳实践,从而自动化开发过程中许多容易忘记的任务.它们也可以只是有趣的扩展,使我们的代码看起来更漂亮/更容易编写. 作为一个Vue爱好者,我花了很多时间为Vue开发人员寻找最好的VS Code扩展.这里有一些让我的生活变得如此简单的方法. 准备好了吗? 让我们直接切入正题. Vetur 如果你从这篇文章中下载了一个VS Code扩展,它一定是Vetur. 一个针

  • Python利用IPython提高开发效率

    一.IPython 简介 IPython 是一个交互式的 Python 解释器,而且它更加高效. 它和大多传统工作模式(编辑 -> 编译 -> 运行)不同的是, 它采用的工作模式是:执行 -> 探索 ,而大部分和数据分析相关的代 码都含有探索式操作(比如试误法和迭代法),所以 IPython 能大大提高编码效率. IPython 发展到现在,它不仅仅只是一个加强版的 Python shell 了, 它集成了 GUI 控制台,这可以让你直接进行绘图操作:它还有一个基于 Web 的交互式笔记

  • 使用WEB工具快速提高Android开发效率

    正所谓工欲善其事,必先利其器.学习并应用优秀的轮子,可以让我们跑的更快,走的更远.这里所指的工具是广义的,泛指能帮助我们开发的东西,或者能提高我们效率的东西,包括:开发工具,监测工具,第三方代码库等. 在Google的广大支持下,便捷开发Android程序的Native工具层出不穷.其实Android开发涉及到的范围也不小,一些Web工具有时候也会带来事半功倍的效果.有些甚至是一些native应用无法做到的.本文,将简单列举一下本人正在使用的一些工具,当然也会持续更新. 查找优秀的参考工程 co

  • 推荐10款能大大提高IntelliJ Idea开发效率的常用插件

    我们先来介绍下IntelliJ Idea插件安装方式: 新版本IDE安装方式略有不同,不一一赘述 1.Background Image Plus 这款插件并不能直接提高你的开发效率,但是可以让你面对的IDE不再单调,当把背景设置成你自己心仪的的图片, 是不是会感觉很赏心悦目,编码效率会不会因此间接的提高 使用方法: 2.Mybatis Log Plugin Mybatis现在是java中操作数据库的首选,在开发的时候,我们都会把Mybatis的脚本直接输出在console中, 但是默认的情况下,

随机推荐