VSCode
5月9日 · 306 人阅读
visual studio code 配置vue开发环境
废话
重装了用了3年的操作系统,配置前端开发环境时一些开发工具配置丢失了,这里做下记录,我精简了一遍插件,确保都用得上,且功能不重叠。
正文
本文针对的开发工具是vscode, 配合vue-cli创建的项目,告诉你安装什么插件,每个插件的作用,每行配置代码的作用
一、插件
网上搜索vscode插件的文章,动辄十几个,其实根本用不了那么多,很多插件的作用还有重叠,电脑性能还被白白浪费。这里精简为主,每一个插件都发挥它最大的作用,并尽量说明它们的作用
Vetur
用vue开发的必装,官方推荐,别纠结用哪个,就它了。
作用:高亮.vue文件,附带有格式化功能,配合Eslint插件对代码进行格式化检查
Eslint
如果你想你(团队)的代码风格所有地方看起来都像是同一个人写的,就靠它咯
作用:检查你的js、html、css代码,确保它们符合规范,并且代码风格保持一致性,强制性的规则,你少写一个空格或者多敲一个回车都会被严格的指出来,强迫症的福音,第一次用它的同学可能会抓狂,熟悉后你会感谢它
使用:想让插件生效,你的项目还得做一番复杂的配置,好在vue-cli生成的项目帮我们把配置都生成好了,你也不必修改什么规则,直接用就行,在使用vue-cli生成webpack项目时会询问你是否启用eslint并且使用哪套规范,选择Standard规范就行:
[图片上传失败...(image-54630e-1528709488786)]
它会自动在你的项目根目录下生成.eslintignore
和.eslintrc.js
两个配置文件,package.json
文件里增加下面的依赖:
"eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.0.0",
ps:对于我这种从前写Java的人来说,刚开始也是无法接受这种tab键2个空格、不加分号的Standard风格,不过一周以后再看原先的Java代码反倒不习惯了
二、配置
其实装好上面几个插件你已经可以满足最基本的开发需求了,但现在还没有加任何配置,我们来配置下满足些额外的需求
1.代码错误实时提示
少写了一个空格,或者多写了一个分号,都能马上以醒目的波浪线提示出来,鼠标悬浮上去还有错误提示,双击波浪线的代码还会出现一个小灯泡,点击灯泡可以自动帮你修正代码格式:
[图片上传失败...(image-6048ce-1528709488785)]
我们可以找到编辑器左上角,依次打开 文件
、 首选项
、 设置
,将i面配置加入到右边的用户设置中:
"eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ],
2.ctrl+s保存时自动修正格式错误的js代码
在配置里加入下面的json:
"eslint.autoFixOnSave": true,
3.格式化写的代码
在vue文件里,按下鼠标右键,在菜单里你会发现有个格式化文件
按钮,我们点击它,你会发现,本来图A好好的代码格式化后变成了图B,由于不符合standard的规范,就报错了:
图A:
[图片上传失败...(image-9440d7-1528709488784)]
图B:
[图片上传失败...(image-9afa99-1528709488784)]
格式化后多帮我们加了分号,还把单引号变成了双引号。
这是由于vetur
插件默认格式化vue文件里面的js代码使用的prettier
,和我们的standard规范有冲突,你可以点击这里查看vetur
插件格式化的默认配置
既然知道了原因,我们可以覆盖它的默认配置:
"vetur.format.defaultFormatter.js": "vscode-typescript",
再试一次格式化,发现问题解决了,不过还是报错:
[图片上传失败...(image-5562e8-1528709488784)]
鼠标悬浮上去提示告诉我们,定义函数时,函数名要与后面的括号有一个空格,所以我们继续加配置解决问题:
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
这次格式化vue文件终于没有报错啦
别急哈,问题还没完:
请你仔细的观察下整个vue文件格式化后的样子,有没有发现html模板代码没有被格式化?
因为vetur
插件的默认格式化配置里,是没有为html模板格式的,需要我们手动指定配置:
"vetur.format.defaultFormatter.html": "prettier",
4.保存时自动格式化
每次写完代码自己右键菜单格式化似乎有点麻烦,所以我们可以让它更智能用电,ctrl+s一保存就立马自动格式化:
"editor.formatOnSave": true,
其他与插件无关的配置
在vue文件,默认按tab会有4个空格的缩进,我们需要的是2个:
"editor.tabSize": 2,
小结
好啦,能满足你基本写代码需求的插件和配置我讲完了,不多,配合vue-cli项目真的很省事,2个插件,几行配置就搞定了,更重要的是,你能知道每个插件、每行配置都干了什么事情,解决了什么问题,而不是装了一堆不知道作用的插件,配置了一堆自己也看不懂的配置。
这里汇总下上面的配置:
"eslint.validate": [ "javascript", "javascriptreact", { "language": "vue", "autoFix": true } ], "eslint.autoFixOnSave": true, "vetur.format.defaultFormatter.html": "prettier", "vetur.format.defaultFormatter.js": "vscode-typescript", "javascript.format.insertSpaceBeforeFunctionParenthesis": true, "editor.formatOnSave": true, "editor.tabSize": 2,
其他插件
vscode-icons 美化左边资源管理器里项目文件的图标,每一种文件后缀都对应一个图标,很直观明了
vscode-background 设置代码的背景(找张喜欢的小姐姐作为背景),腐宅必备
Path Autocomplete 代码引用其他资源(比如图片)写相对路径时,会有提示
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
6月11日云栖精选夜读丨普京点赞中国数字经济背后 阿里巴巴正在改变俄罗斯商业
俄罗斯总统普京近日接受中央广播电视总台专访时,大力点赞中国发展数字经济的成就,称对中国物联网和电子商务印象深刻。 普京表示,中国在现代经济形态,以及诸如数字经济这样有发展前景的领域中做出了巨大的努力,并且取得了显著成绩,如物联网和电子商务。 热点热议 普京点赞中国数字经济背后 阿里巴巴正在改变俄罗斯商业 作者:技术小能手 优酷发布2018世界杯战略 阿里云将提供全程技术保障 作者:樰篱 ET大脑与寒武纪:看阿里云的最强计算决心 作者:云攻略小攻 知识整理 Spring中Bean的生命周期及其扩展点 作者:超人归来007 Http请求和响应的编码问题 作者:codingcoge MyBatis关联查询分页 作者:小姚同学 理解并正确使用synchronized和volatile 作者:classfly 从SpringBoot到SpringMVC 作者:codesheep 美文回顾 这些商家为何领跑新零售之战?淘宝大学云课堂让企业学习变简单了 作者:技术小能手 美国专家:人工智能凛冬将至 作者:技术小能手 java程序员应该具备的技能 作者:q1622479435 Java数据库的那些事(...
- 下一篇
从零开始学 Web 之 JavaScript(五)面向对象
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注。在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一、面向对象 1、对象创建方式 1.1、调用系统函数创建对象 (创建对象的最简单方式就是创建一个 Object 的实例,然后再为它添加属性和方法。) var obj = new Object(); obj.name = "Daotin"; obj.age = 18; obj.eat = function () { console.log("我很能吃"); ); 缺点:使用同一个接口创建很多对象,会产生大量的重复代码。 1.2、自定义构造函数创建对象 工厂模式创建对象:考虑到在 ECMAScript 中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的细节(把创建一个函数的过程封装在一个函数里面),缺点:创建的对象属性都是一样的。 function creatObject() { var...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS8编译安装MySQL8.0.19
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS7安装Docker,走上虚拟化容器引擎之路