摘要：这是为什么呢因为我们虽然引入了，但是还没有对做设置，我们在项目的根目录下创建一个文件，然后在其中加入再次执行，现在我们看到已经能够起作用了。
摘要： 0错误0警告应该是每个程序员最基本的要求。
原文：用vscode开发vue应用
作者：张京
Fundebug经授权转载，版权归原作者所有。
现在用VSCode开发Vue.js应用几乎已经是前端的标配了，但很多时候我们看到的代码混乱不堪，作为一个前端工程师，单引号双引号乱用，一段有分号一段没有分号，有的地方有逗号有的地方没有逗号，空格回车都对不齐，还说自己做事认真，这不是开玩笑的事情。
我们今天从头开始，完整地讲述一下一个重度代码洁癖患者该如何用vscode开发vue，以及如何把一个已经可以宣判死刑的全身各种格式错误几万条的项目整容成标准美女。
从安装开始为了准确起见，我们把vscode里所有插件全部禁用，把用户设置清空，以让它尽可能恢复成原始的样子：
npm install -g @vue/cli
然后，我们开始创建项目：
vue create hello-world
在这里，一定要选择第一项：babel + eslint，这两个是必不可少的。我见到有些人嫌eslint麻烦，居然在项目建立好之后手工把eslint关掉的，简直无语。
安装完毕：
我们先不急着执行，执行代码是最容易的事情，我们先打开代码看一下：
好吧，至少我们需要先安装vetur插件。这几乎已经确定是开发vue项目的标配了，即使我不说，vscode也会强烈建议你安装它。
不能格式化，连个提示都没有！
用lint格式化就算vscode里的vetur不能帮我们自动格式化，好在package.json命令里还有一个lint命令，我们看看lint命令能不能帮我们自动格式化：
lint居然说没有错误！明明就是多了很多空格的错误好吧，为什么？
这是因为缺省的vue-cli没有为我们安装@vue/prettier插件，我们先来手工安装一下：
yarn add -D @vue/eslint-config-prettier
然后在package.json或者.eslintrc.js或者其它什么你设置eslint的地方，给它加上：
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"@vue/prettier"
],
特别是最后这一个@vue/prettier，非常重要。然后再执行yarn lint。多余的空格被自动干掉了，但是我们发现有一些地方同时也被篡改了：
所有的单引号被变成双引号了，原本行尾没有的分号被加上了分号。这是为什么呢？因为我们虽然引入了prettier，但是还没有对prettier做设置，我们在项目的根目录下创建一个.prettierrc.js文件，然后在其中加入：
module.exports = {
semi: false,
singleQuote: true
}
再次执行yarn lint，现在我们看到lint已经能够起作用了。它不但能把我们多余插入的空格删掉，并且能按照规则把双引号变成单引号，把行尾多余的分号删掉。当然，关于行尾加不加分号这是一个哲学命题，你可以根据你个人的喜好自行决定。在这里，我们权且按照vue-cli的标配执行。
到这一步很关键，假设你拿到一个烂的不再烂的vue项目，里面有几千个.vue文件，几万个各种格式错误，也都能通过yarn lint这一行命令把它们全部修正过来！
在vscode里格式化事情还没有完，我们注意到虽然yarn lint命令能在编写完代码之后帮我们格式化，但是既然我们是用vscode进行开发，我们当然希望能在vscode里直接看到对于错误的标注。
这时候我们需要在vscode里再安装一个插件eslint。
你以为安装上eslint插件就行了吗？不行的。因为eslint并不知道我们的.vue文件里面包含了js语法，所以还需要打开我们的vscode设置文件。
注意：这里一定要设置到项目的设置里，而不要只是设置到你自己个人的设置里，否则你团队的小伙伴随便一改又乱掉了。正确的方法是在你项目的文件夹下有一个.vscode文件夹，而vue最讨厌的地方是它居然会把这个文件夹放到.gitignore里，这个错误你必须要纠正过来，也就是说从.gitignore文件里把.vscode删掉。切切。
在你项目的settings.json里文件里添加以下代码：
{
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
}
这时候所有错误都被标注出来了，注意看左侧，一定要让这个settings.json文件是绿色的，而不能是灰色的，如果是灰色的，请检查你的.gitignore文件：
因为我们在settings.json文件里设置了autoFixOnSave，所以不管多么乱的格式，只要一按Ctrl+S保存，自动就帮我们把代码格式整理好了，是不是很方便呢？
和Prettier的冲突有些时候我们的vscode里插件装的比较多，譬如还安装了prettier插件，因为我们不只开发vue项目，可能还有其它类型的js项目特别是传统js项目，需要用到prettier进行美化，而prettier的一些功能是会和eslint相冲突的，比如说我们在全局设置了prettier的formatOnSave，这个功能就会和eslint的autoFixOnSave打架，为了避免这个矛盾，我们通常还会在本项目的settings.json文件里再多加几个选项，类似于这样：
"editor.tabSize": 2,
"editor.formatOnSave": false,
"prettier.semi": false,
"prettier.singleQuote": true
有了这些设置，基本上prettier就不会和eslint打架了。
小结以上就是用vscode开发vue程序的标配，并不像网上有些文章说的那么简单，不是只需要配一个eslint就能解决的事情，这里还用到了vetur，eslint和prettier，把几个工具综合用好，才能真正达到我们的错误随时可见，保存自动修改，更正既往错误的目的。希望每个前端工程师写出的代码都如出一人之手，漂亮简洁干净。
我们的目标始终如一：0错误0警告。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/7256.html
摘要：调查显示，和目前有着最高的开发者满意度。微软正在反击说到，绝对是文本编辑器领域最大的惊喜。虽然和类似是应用，但微软在提高性能方面下了很多的功夫。再加上的兴起，看起来微软在开发领域的发力还是很成功的。 showImg(https://segmentfault.com/img/bV12hB?w=600&h=380); 简评：最近一份超过 23,000 名开发者参与的关于 JavaScrip...
摘要：在本文之前，先给大家讲一下接下来需要安装的东西和他们之间的联系。的安装一安装的官网下载的安装包。在或中执行命令。以上，就是和的安装与配置 在本文之前，先给大家讲一下接下来需要安装的东西和他们之间的联系。 node: node是js服务执行的环境，通常我们使用node实现前端的工程化。前端工程化有很多工具可以实现，比如webpack、glup等，他们都是基础node进行开发的。 w...
摘要：如果想配置开发工具面向前端及开发人员的配置如果想配置开发工具配置及使用技巧所谓网红编辑器，我觉得比来的更爽，因为的所有操作和插件，对于来说也就是一个插件就能无缝兼容。作为一个前端开发，开箱即用的代码编辑高亮提示都十分友好。 如果想配置 sublime 开发工具 => 面向web前端及node开发人员的vim配置 如果想配置 vim 开发工具 => sublime配置及使用技巧 所谓网红...
摘要：开始时间日接触，先在官网十目一行学完了基本特性，作为一个的伪全栈，用感受了一把双向绑定，感觉比的要强悍不少，但这开发环境吧，不能写个，就总觉得自己不能零距离接触。 开始时间：3.26日接触Vue，先在官网十目一行学完了基本特性：http://cn.vuejs.org/v2/guide/，作为一个JAVA WEB的伪全栈，用Myclipse感受了一把双向绑定，感觉比JQUERY的JSRE...
阅读 2233·2023-04-25 14:50
阅读 1129·2021-10-13 09:50
阅读 1815·2019-08-30 15:56
阅读 1787·2019-08-29 15:29
阅读 2856·2019-08-29 15:27
阅读 3511·2019-08-29 15:14
阅读 1114·2019-08-29 13:01
阅读 3237·2019-08-26 14:06
