注:本文首发在 我的个人博客

最近有个项目使用了 Vue.js ,本来一直使用的是 PHPStorm 来进行开发,可是遇到了很多问题。

后来,果断放弃收费的 PHPStorm ,改用 vscode (Visual Stdio Code).
当然 vscode 对 vue 也不是原生支持的,今天来扒一扒如何配置 vscode 以便优雅地编辑 vue 文件

先来扒一扒使用 PHPStorm 遇到的问题:

  1. vue文件虽然可以通过插件来解决高亮问题,但是 <script> 标签中的 ES6 代码的识别老是出问题,箭头函数有的时候能正确识别,有的时候会报错

  2. 无法正确识别 vue 文件中的 jsx 语法

  3. 无法正确识别和高亮 vue 文件 <style> 标签中使用的 less 语法

  4. vue文件中 <template> 部分使用了大量的自定义标签(自定义组件)和自定义属性,会报一堆 warning

  5. 经常性卡死

  6. webpack实时编译的错误不能直接展示在代码编辑器内,还得自己到控制台中查看

如何安装 vscode

很简单,传送门:官网下载安装

第一步,要支持 vue 文件的基本语法高亮

这里,我试过好3个插件: vue, VueHelpervetur ,最终选择使用 vetur

安装插件: Ctrl + P 然后输入 ext install vetur 然后回车点安装即可。

p.s: vscode 的插件安装比 PHPStorm 的插件安装更快捷方便,安装完成后还不用重启整个程序,只要重新加载下工作区窗口就可以了。

安装完 vetur 后还需要加上这样一段配置下:

"emmet.syntaxProfiles": {
  "vue-html": "html",
  "vue": "html"
}

这时可以打开一个vue文件试试,注意下右下角状态栏是否正确识别为 vue 类型:

如果被识别为 texthtml ,则记得要点击切换下。

第二步,要支持 vue 文件的 ESLint

可能还有人会问为什么要 ESLint ?没有 lint 的代码虽然也可能可以正确运行,但是 lint 作为编译前的一道检测成本更小,而且更快。此外, ESLint 还有很多规范是帮助我们写出更加优雅而不容易出错的代码的。

jshint 本来也是个不错的选择,但是 ESLint 对 jsx 的支持让我还是选择了 ESLint.

安装插件: Ctrl + P 然后输入 ext install eslint 然后回车点安装即可。

ESLint 不是安装后就可以用的,还需要一些环境和配置:

首先,需要全局的 ESLint , 如果没有安装可以使用 npm install -g eslint 来安装。

其次,vue文件是类 HTML 的文件,为了支持对 vue 文件的 ESLint ,需要 eslint-plugin-html 这个插件。可以使用 npm install -g eslint-plugin-html 来安装

接着,安装了 HTML 插件后,还需要在 vscode 中配置下 ESLint:

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
    "eslint.options": {
        "plugins": ["html"]
    },

最后,别忘了在项目根目录下创建 .eslintrc.json , 如果还没创建,还可以使用下面快捷命令来创建:

这样一来 vue 中写的 js 代码也能正确地被 lint 了。

要是不小心少个括号之类的都可以有对应的报错:

多余 import 也都能报错:

还是蛮智能的。

第三步,配置构建任务

vue 项目的构建我选择用 webpack ,不过,并不是直接使用命令行下的 webpack 而是使用了 webpack 的 API 写的 node 脚本。 脚本主要有两个,一个是 build/bin/build.js 另一个是 build/bin/watch.js 分别是单次构建和实时构建。

于是乎,对应 vscode 中的 tasks 也是有两个: buildwatch ,简单配置如下:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    // use `Ctrl+P` and type `task` + SPACE + <taskName> to run a task
    "version": "0.1.0",
    "tasks": [
        {
            "taskName": "build",
            "echoCommand": true,
            "command": "node",
            "args": [
                "build/bin/build.js"
            ],
            "suppressTaskName": true,
            "isBuildCommand": true
        },
        {
            "taskName": "watch",
            "echoCommand": true,
            "command": "node",
            "args": [
                "build/bin/watch.js"
            ],
            "suppressTaskName": true,
            "isBackground": true
        }
    ]
}

这样配置好后,按 Ctrl + Shift + B 即可开始单次构建。 不过单次构建比较慢(要10秒+),一般我都用实时构建:Ctrl + P 然后输入 task watch <回车> 即可开始实时构建。实时构建除了第一次比较慢,其他时候还是非常快的,一般1秒内就可以构建好。

最后,webpack 构建错误提示

webpack 构建失败后一般都会有错误提示,会显示在输出窗口中:

为啥是彩色的? 因为装了 Output Colorizer 这个插件。

当然,这样还是不够方便 -- 实时构建是后台运行的,“输出”窗口一般也都是在后台,每次保存完文件还得点开岂不麻烦。

要是能做到像 ESLint 一样直接把错误标到编辑器上面就好了。真的可以吗?翻了下 vscode 的文档,发现有神奇的 problemMatcher -- 可以对任务输出进行解析,解析出的问题会显示在“问题”窗口中,如果还有文件名行号和列号,则会在源代码编辑窗口中对应的位置标出来。

先放个最终效果:

在这个文件的第32行,import 了一个不存在的模块,这样的错误在 ESLint 中当然是检查不出来的,然而在 webpack 的实时构建中会报错:

这个事情的困难在于两点:

  1. 如何通过 problemMatcher 把这个错误给抓出来?

  2. 如何找到错误对应的行号?(如果可能的话,还有列号)

webpack的错误输出格式并不是完全统一的,而且有些还没有行号 -- 一方面可能是 webpack 的 bug ,另一方面 vue 文件在构建的时候会拆成 template, script 和 style 三个方面进行构建,报错的行号可能对不上。

最终我的解决方案是对 webpack 的错误重新格式化输出,然后匹配:

首先,重新格式化输出需要 format-webpack-stats-errors-warnings 这个包(偶新写的)

npm install --save-dev format-webpack-stats-errors-warnings

然后,到 build/bin/build.jsbuild/bin/watch.js 中在 webpack 构建完成的回调函数中增加这个格式化后的输出:

更多使用介绍见 github

最后,在 .vscode/tasks.json 中,每个任务下添加 problemWatcher:

// ...
{
    "taskName": "build",
    // ...
    // build 任务的:
    "problemMatcher": {
        "owner": "webpack",
        "fileLocation": [
            "relative",
            "${workspaceRoot}"
        ],
        "pattern": {
            "regexp": "^!>(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$",
            "severity": 1,
            "file": 2,
            "line": 3,
            "column": 4,
            "endLine": 5,
            "endColumn": 6,
            "message": 7
        }
    }
}

{
    "taskName": "watch",
    // ...
    // watch 任务的:
    "problemMatcher": {
        "owner": "webpack",
        "fileLocation": [
            "relative",
            "${workspaceRoot}"
        ],
        "pattern": {
            "regexp": "^!>(\\w+): (\\S+)?:(\\d+),(\\d+)(?:~(?:(\\d+),)?(\\d+))?: (.*)$",
            "severity": 1,
            "file": 2,
            "line": 3,
            "column": 4,
            "endLine": 5,
            "endColumn": 6,
            "message": 7
        },
        "watching": {
            "activeOnStart": true,
            "beginsPattern": "^\\s*Webpack begin run",
            "endsPattern": "^\\s*Build complete at"
        }
    }
    // ...
}
// ...

注:在 watch 任务中,为了匹配何时开始和何时结束,我在 webpack 构建的 run 和 watch 时增加了一个 console.log('Webpack begin run') 的打印,而在构建完成后增加了一个 console.log("Build complete at ..") 的打印。

OK,终于基本搞定了 vscode ,可以愉快地开发 vue 应用了。

你可能感兴趣的文章

31 条评论
在寂寞中季节 · 9月12日

vsc用了和我一样的主题。好品味。哈哈

+1 回复

ann_glx · 9月19日

问下大神,怎么配置才能在vue中写html代码,就是直接输入标签名后按tab键。这些安装后半天才出现闭合标签,且直接输入html标签名按tab键没反应。

+1 回复

RedMaxOrz · 3月20日

请问vetur和ESLint的配置代码是加在哪个文件下呢?

回复

0

可以加在文件夹下面的.vscode/launch.json中,也可以直接打开 文件 -> 首选项 -> 设置 保存到用户设置的 settings.json

北月武士 作者 · 3月20日
0

@北月武士 soga 我试试 谢大神分享~

RedMaxOrz · 3月20日
0

说错了,当前工程文件夹下面的应该是 .vscode/settings.json

北月武士 作者 · 3月21日
albeni · 3月24日

请问一下,我用的vue的vuehelper插件,可是有时候能用,有时候不能用,这是为什么?

回复

0

不好意思,我没有用vuehelper,我用的是vetur插件

北月武士 作者 · 3月24日
0

@北月武士 好的吧,谢谢

albeni · 3月24日
chenneil · 3月24日

關於 "我选择用 webpack ,不过,并不是直接使用命令行下的 webpack 而是使用了 webpack 的 API 写的 node 脚本" 的腳本部份,能不能請作者再多說明一些? (哪裡可以找到呢?) 感謝您

回复

1

vue-cli工具默认生成的构建脚本中就是使用webpack的API编写的node脚本,具体内容你可以参考下生成的build/build.js。更多关于webpack的API可以参考webpack的官网:https://webpack.github.io/doc...

北月武士 作者 · 3月24日
sinestandly · 3月28日

我使用您的vscode配置之后,vue 组件中的JavaScript 如果是es6的规范的话,无法进行正确的格式化。貌似需要在配置中指定autoFix:true

我的vscode 相关配置
{
 "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    "editor.formatOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.options": {
        "plugins": [
            "html"
        ]
    },
    "eslint.autoFixOnSave": true
}

回复

Eamonnzhang · 4月26日

楼主,怎么用这个插件格式化代码啊?

回复

四角怪 · 6月8日

<style>里面写样式 没提示啊 怎么办

回复

0

对的 有效果。。熬着熬瓜了。。

四角怪 · 6月8日
0

+1 没有提示太难受了

SHALEWOXIEXIE · 7月4日
0

转换成class写法最明智

张文涛 · 9月28日
coconut · 6月28日

楼主你好,请问vscode能断点vue吗,我折腾了大半天没成功,是不是不支持.vue文件

回复

zennu · 6月28日

搭好了 楼主的主题 滋滋不错 啥主题

回复

tangchi695 · 6月30日

哇,终于把VS弄好了,之前vue里面不能emmet,太痛苦了,感谢楼主!

回复

花溪的小石头 · 8月16日

vue文件没法跳转函数或者引入的文件,怎么解决?

回复

一一她爸 · 9月4日

第三步,配置构建任务 ,以后不明白了:怎么打开配置文件?

回复

0

按F1或Ctrl+P,然后输入task config...

北月武士 作者 · 3 天前
duanweidi · 10月12日

我想问下有没有大佬在用vscode中的vetur的时候遇到复制 粘贴的时候他自己会自动换行的那种情况

回复

0

是不是有什么自动格式化插件?

北月武士 作者 · 3 天前
0

大佬我也不清楚,我现在用vsc感觉都是问题,全是什么自动缩进问题,我把所有的自动缩进都给关了,不管是vue还是普通的html全是在自动缩进出现问题

duanweidi · 3 天前
victor918 · 10月13日

默默点赞

回复

载入中...
北月武士 北月武士

4.3k 声望

发布于专栏

北月武馆

这里有一些技术方面干货分享和一些感想,欢迎光临与交流。

2 人关注