用VS Code开发Vue应用

  • 时间:
  • 浏览:0

肯能朋友儿在settings.json文件里设置了autoFixOnSave,什么都有不管多么乱的格式,若果一按Ctrl+S保存,自动就帮朋友儿把代码格式架构设计 好了,是详细一定会很方便呢?

这是肯能缺省的vue-cli那么为朋友儿安装@vue/prettier插件,朋友儿先来手工安装一下:

到這個 步很关键,假设你拿到另另4个烂的不再烂的vue项目,底下有几千个.vue文件,几万个各种格式错误,也都能通过yarn lint這個 行命令把它们详细修正过来!

这可是朋友儿须要在vscode里再安装另另4个插件eslint。

事情还那么完,朋友儿注意到嘴笨 yarn lint命令能在编写完代码可是帮朋友儿格式化,可是既然朋友儿是用vscode进行开发,朋友儿当然希望能在vscode里直接想看 对于错误的标注。



装上vetur可是几只不得劲人样了。接下来朋友儿来试一试上能 自动格式化,这部分才是洁癖患者的最爱。胡乱加几只空格,可是保存试试看:

好吧,最少朋友儿须要先安装vetur插件。这几乎肯能选泽是开发vue项目的标配了,即使我不说,vscode也会强烈建议你安装它。

朋友儿今天从头可是开始英文,详细地讲述一下另另4个重度代码洁癖患者该要怎样用vscode开发vue,以及要怎样把另另4个肯里上能 宣判死刑的全身各种格式错误几万条的项目整容成标准美女。



作为代码洁癖患者,对于系统的版本要求一定也是最苛刻的,不管哪几种可是,都让朋友儿把所有的系统能升级的都升级到最高版本:

朋友儿先不急着执行,执行代码是最容易的事情,朋友儿先打开代码看一下:

以上可是用vscode开发vue多多线程 的标配,并不像网上什么都有有文章说的那么简单,详细一定会只须要配另另4个eslint就能补救的事情,这里还用到了vetureslintprettier,把几只工具综合用好,不上能真正达到朋友儿的错误随时可见,保存自动修改,更正既往错误的目的。希望每个前端工程师写出的代码都如出一人之手,漂亮简洁干净。

朋友儿的目标始终如一:0错误0警告

摘要: 0错误0警告应该是每个多多线程 员最基本的要求。

就算vscode里的vetur那么帮朋友儿自动格式化,好在package.json命令里还另另4个lint命令,朋友儿看看lint命令上能 帮朋友儿自动格式化:

可是在package.json肯能.eslintrc.js肯能其它哪几种你设置eslint的地方,给它打上去:

所有的单引号被变成双引号了,从前行尾那么的分号被打上去了分号。这是为哪几种呢?肯能朋友儿嘴笨 引入了prettier,可是还那么对prettier做设置,朋友儿在项目的根目录下创建另另4个.prettierrc.js文件,可是在其中加入:

再次执行yarn lint,现在朋友儿想看 lint肯上能 够起作用了。它不但能把朋友儿多余插入的空格删掉,可是能按照规则把双引号变成单引号,把行尾多余的分号删掉。当然,关于行尾加不加分号这是另另4个哲学命题,那么多根据你此人 的喜好自行决定。在这里,朋友儿权且按照vue-cli的标配执行。

这可是所有错误都被标注出来了,注意看左侧,一定要让這個 settings.json文件是绿色的,而那么是灰色的,肯能是灰色的,请检查你的.gitignore文件:

那么格式化,连个提示都那么!

安装完毕:

Fundebug经授权转载,版权归原作者所有。

不得劲是最后这另另4个@vue/prettier,非常重要。可是再执行yarn lint。多余的空格被自动干掉了,可是朋友儿发现有什么都有有地方一起也被篡改了:

在你项目的settings.json里文件里打上去以下代码:

在这里,一定要选泽第一项:babel + eslint,这另另4个是必不可少的。我见到什么都有有人嫌eslint麻烦,青春恋爱物语在项目建立好可是手工把eslint关掉的,青春恋爱物语无语。

lint青春恋爱物语说那么错误!明明可是多了什么都有空格的错误好吧,为哪几种?

注意:这里一定要设置到项目的设置里,而并不可是设置到你此人 此人 的设置里,可是你团队的小伙伴随便一改又乱掉了。正确的妙招 是在你项目的文件夹下另另4个.vscode文件夹,而vue最讨厌的地方是它青春恋爱物语会把這個 文件夹上放.gitignore里,這個 错误你须要要纠正过来,也可是说从.gitignore文件里把.vscode删掉。切切。

有了哪几种设置,基本上prettier就那么多和eslint打架了。

为了准确起见,朋友儿把vscode里所有插件详细禁用,把用户设置清空,以让它尽肯能恢复成原始的样子:

可是,朋友儿可是开始英文创建项目:

青春恋爱物语安装上eslint插件就行何时能 能 ?不行的。肯能eslint并我可是知道朋友儿的.vue文件底下中有 了js语法,什么都有还须要打开朋友儿的vscode设置文件。

现在用VSCode开发Vue.js应用几乎肯能是前端的标配了,但什么都有可是朋友儿想看 的代码混乱不堪,作为另另4个前端工程师,单引号双引号乱用,一段有分号一段那么分号,有的地方有逗号有的地方那么逗号,空格回车都对不齐,还说此人 做事认真,这详细一定会开玩笑的事情。

什么都有有可是朋友儿的vscode里插件装的比较多,譬如还安装了prettier插件,肯能朋友儿不只开发vue项目,肯能还有其它类型的js项目不得劲是传统js项目,须要用到prettier进行美化,而prettier的什么都有有功能是会和eslint相冲突的,比如说朋友儿在全局设置了prettierformatOnSave,這個 功能就会和eslintautoFixOnSave打架,为了补救這個 矛盾,朋友儿通常一定会在本项目的settings.json文件里再多加几只选项,累似 于从前: