Although p>vue files can be highlighted by plug-ins, they are < script> There is always a problem in identifying the ES6 code in the tag. Sometimes the arrow function can correctly identify it, and sometimes it will report an error
jsx syntax in vue file cannot be correctly identified
vue file cannot be correctly identified and highlighted <: style> The less syntax used in the tag
the p>vue file <: template> Some of them use a lot of custom tags (custom components) and custom attributes, and they will report a bunch of warning
frequent stuck
webpack real-time compilation errors, which can't be directly displayed in the code editor, and you have to go to the console to see
how to install vscode
. It's very simple. Portal: official website downloads and installs
the first step. To support the basic syntax highlighting of vue files
Here, I tried three plug-ins: vue, VueHelper and vetur, and finally chose vetur.
install the plug-in: Ctrl+P and then type ext install vetur and press enter to install.
P.S.: The plug-in installation of VS Code is faster and more convenient than that of PHPStorm. After the installation, you don't need to restart the whole program, just reload the workspace window.
after installing vetur, you need to add the following configuration:
"emmet. syntax profiles": {
"vue-html": "html",
"vue": "html"
}
At this time, you can try to open a vue file, and pay attention to whether the status bar in the lower right corner.
the second step is to support ESLint of vue files.
Some people may ask why ESLINT is needed. Although the code without lint may run correctly, lint is cheaper and faster as a pre-compilation test. In addition, there are many specifications in ESLint that help us write more elegant and error-prone code.
jshint was a good choice, but ESLint's support for jsx made me choose ESLint.
Install the plug-in: Ctrl+P, then type EXTENDINSLINT and press enter to install it.
ESLint can not be used after installation, but also needs some environment and configuration:
First, global ESLint is needed, and if it is not installed, npm install -g eslint can be used to install it.
Secondly, vue files are HTML-like files. In order to support ESLint for vue files, the plug-in eslint-plugin-html is needed. You can use npm install -g eslint-plugin-HTML to install
Then, after installing the HTML plug-in, you need to configure eslint:
"eslint.validate": [
"JavaScript",
"JavaScript react",
"html",
"vue"
],
"esllintt.options": {
"plugins": ["html"]
},
Finally, don't forget to create eslintrc.json in the project root directory.
If you are not careful, you can get a corresponding error:
You can get an error even if you have an extra import:
It's quite smart.
the third step is to configure the construction task.
I chose to use webpack for the construction of the p>vue project. However, I used the node script written by the API of webpack instead of the webpack directly. There are two main scripts, one is build/bin/build.js and the other is build/bin/watch.js, which are single build and real-time build respectively.
as a result, there are two tasks in the corresponding vscode: build and watch, and the simple configuration is as follows:
{
// See /fwlink/? LinkId=733558
// for the documentation about the tasks.json format
// use `Ctrl+P` and type `task` + SPACE + < taskName> to run a task
"version": ".1.",
"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"
],
"suppressed taskname": true,
"isbackground": true
} < p! However, a single build is slow (it takes 1 seconds+). Generally, I use real-time build: Ctrl+P and then enter Task Watch <; Enter > You can start real-time construction. Real-time construction is very fast except for the first time, and it can be built in 1 second.
Finally, webpack construction error prompt
After Web pack construction fails, there is usually an error prompt, which will be displayed in the output window:
Why is it colored? Because the plug-in Output Colorizer is installed.
Of course, it's not convenient enough-the real-time build runs in the background, and the "output" window is usually in the background, so it's not troublesome to open the file every time you save it.
it would be nice if you could mark the errors directly on the editor like ESLint. Is it really okay? Looking through the documentation of vscode, I found that there is a magical problemMatcher -- the task output can be parsed, and the parsed problem will be displayed in the "Problems" window. If there are file name line numbers and column numbers, it will be marked in the corresponding position in the source code editing window.
Let's put the final effect first:
In line 32 of this file, a non-existent module is import. Of course, such an error can't be detected in ESLint, but it will be reported in the real-time construction of webpack:
The difficulty of this matter lies in two points:
How to catch this error through problemMatcher?
how to find the line number corresponding to the error? (and column numbers, if possible)
The error output formats of Web packs are not completely uniform, and some of them don't have line numbers yet-on the one hand, it may be a bug of Web packs, on the other hand, vue files will be built in three aspects: template, script and style, and the reported line numbers may not match.
in the end, my solution is to re-print format the errors in webpack and then match them:
First of all, Print format needs the package format-webpack-stats-errors-warnings (even newly written)
NPM install-save-devformat-webpack-stats-errors-warnings
Then, Go to build/bin/build.js and build/bin/watch.js and add this formatted output to the callback function built by webpack:
See github
Finally, in. vscode/tasks.json, Add problem watcher:
/...
{
"taskname": "build",
/...
//build task:
"problem matcher": {
"owner": "web.
"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 task:
"problem matcher": {< p}
"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 "
}
}
/...
}
/...
Note: In the watch task, in order to match when to start and when to end, I added a print of console.log ('webpack begin run') when Web pack built Run and watch, and added a print of console.log("Build complete at ... ") after the construction was completed.