VsCode从零开始配置一个属于自己的Vue开发环境

vscode vue

VsCode算是比较热门的一个代码编辑器了,全名Visual Studio Code
下载地址:点我去下载
插件众多,功能齐全,我在平常开发过程中都是用的它,整理了些自认好用的插件,

自己也记录下,万一以后换电脑了捏??

参考文档:https://liubing.me/vscode-vue-setting.html

Vetur

插件文档地址:https://marketplace.visualstudio.com/items?itemName=octref.vetur
开发Vue必装的一个插件

未安装之前vue文件显示这样的

安装完成后显示这样的,看着是不是贼拉舒服

Vue 2 Snippets

插件文档地址:https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
主要加强vue的便捷写法

Auto Close Tag

插件文档地址:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
自动闭合标签所用

配合快捷键Alt+. (Command+Alt+. for Mac)特别好使。

Auto Rename Tag

插件文档地址:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
自动修改重命名配对的标签

Bookmarks

插件文档地址:https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
可以对成片的代码做一些书签标记,方便后续查看。

Bracket Pair Colorizer

插件文档地址:https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
对括号进行着色,方便区分,下面的图分别是安装前后的比较

Vue Peek

插件文档地址:https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek
用于Vue快速查看组件定义以及组件跳转,具体使用见插件文档地址中的使用方法。

JavaScript (ES6) code snippets

插件文档地址:https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
用于快速生成ES6代码片段

Material Icon Theme

插件文档地址:https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
Material风格的icon文件图标,可以看下安装前后的区别。

ESLint

插件文档地址:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
这个不用多说了,规范代码格式的。

注:新手上路,后面发现其他问题或者有用的插件会补充进去,大家有更好用插件的多多留言奥??。

原文地址:https://www.cnblogs.com/hq-HQ/p/12267266.html

时间: 2024-07-30 08:48:52

VsCode从零开始配置一个属于自己的Vue开发环境的相关文章

Visual Studio Code 配置VUE开发环境

简介 VSCode(Visual Studio Code)这款开发工具是微软官方出品,开源,免费.功能相当强大.插件丰富,使用者很多,是Vue开发的不二之选.下面讲解下VSCode 配置VUE开发环境 下载 官方:https://code.visualstudio.com/ 在官方下载安装包,点击操作按照指导进行安装就可以,过程比较简单,这里不进行详细介绍. 概念讲解(Workspace&Folder) VSCode中分Workspace和Folder,Workspace相当于是一个项目的集合,

【原创】win10下搭建vue开发环境+IIS部署

[原创]win10下搭建vue开发环境 如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图: 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. node.js的官方地址为:https://nodejs.org/en/download/,如下图所示: 根据自己电脑的具体配置,选择你要下载的安装

搭建vue开发环境的步骤,六步完成

搭建vue开发环境的步骤,其实也挺简单的,之前这环境的配置也困扰着我一:在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,下载地址:http://nodejs.cn:注意是32还是64位:二:下载好node之后,打开docs管理工具,先看看node安装成功了没有,输入 node -v ,回车,会输出node的版本号. 三:淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:npm install --global

面试官:自己搭建过vue开发环境吗?

转自大佬:不懂代码的攻城师 开篇 前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后npm run install 安装依赖,npm run serve启动项目然后就开始写业务代码了. 但是对项目里的webpack封装和配置了解的不清楚,容易导致出问题不知如何解决,或者不会通过webpack去扩展新功能. 该篇文章主要是想告诉小伙伴们,如何一步一步的通过 webpack4来搭建自己的vue开发环

用 Ubuntu 12.04 搭建一个 Ruby on Rails 本地开发环境

转载,原文链接 http://linux.cn/portal.php?mod=view&aid=170 用 Ubuntu 搭建一个 Ruby on Rails 本地开发环境 想要开发 Ruby on Rails 应用吗?虽然已经有一些(初级的)Ruby on Rails 教程了,但是似乎在如何搭建一个简洁而更新的本地开发环境方面还有些不甚确定的地方. 这个教程将引导你通过几个步骤来搭建一个基于 Ubuntu 的 Ruby on Rails 本地开发环境.而这个教程的即将发布的第二部分,将帮助你搭

构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 javascript 文件.多终端多浏览器同步测试的开发环境,并且还可以通过 piblish 命令对项目下的文件进行打包操作. 相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常

基础知识 - 在 Ubuntu 14.04 中配置 Sublime Text 3 的 Golang 开发环境

1.下载 golang 并解压(这里以解压到 $HOME/golang/ 目录为例): http://www.golangtc.com/download 2.创建 GoPath 相关目录(这里以 $HOME/golang/projects/ 目录为例): mkdir ~/golang mkdir ~/golang/projects mkdir ~/golang/projects/3rdparty mkdir ~/golang/projects/3rdparty/bin mkdir ~/golan

linux 下 VNC Server安装配置及 eclipse CDT C/C++ 开发环境搭建(我用的是阿里云服务器 ubuntu 12.04 64-bit,无图形化界面)

linux 下 VNC Server安装配置及 eclipse CDT C/C++ 开发环境搭建(我用的是阿里云服务器 ubuntu 12.04 64-bit,无图形化界面): 既然要用 eclipse 可视环境下开发,那首先要安装图形界面喽!!! 对开发者来说,个人认为 linux 选择界面优先选择顺序:Awesome(性能最好) > Xfce4 > gnome > unity-2d //////////////////////////////////////////////// 首先

vue开发环境配置跨域,一步到位

本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1.开发环境设置跨域 使用工具:vue-cli自带的配置 配置目录 /config/index.js //自行复制黏贴 proxyTable: { '/apis':{ target: 'http://10.1.63.26:19080/', // 后台api changeOrigin: true, //