vscodevetur（vscodevetur插件）

本篇文章给大家谈谈vscodevetur，以及vscodevetur插件对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vscode语言模式没有vue
• 2、vscode 自动 eslint 校验
• 3、vue VSCode 开发设置（html自动补全、eslint保存时格式化、vetur 格式化html）
• 4、vscode使用v-for报错的问题解决
• 5、华为padvscode配置
• 6、如何优雅地使用 VSCode 来编辑 vue 文件

vscode语言模式没有vue

VSCode不梁尘支持Vue的语言模式，但可以通过安装Vue.js插件来支持Vue的语法高亮。VSCode的官方插件商店中有各种Vue.js插件可供选择，比如Vetur、Vue VSCode Snippets等，可以在VSCode中安装这些插件腊渣巧以获轮键得更好的Vue语法支持。

vscode 自动 eslint 校验

在对 Element-UI 二次开发之前，先配置了 vscode 的 eslint 校验，走了一些弯路，这里记录一下。

如果用 ts，eslint.validate 里再加入 typescript``typescriptreact

如此，校验修复的事情不再让 prettier 和 vetur 来插手，纯正的 eslint 规则。（想要 prettier 的话其实作为 eslint 的插件来引入使用会更方便）

同样的 vscode，同样的 settings.json，在另一个项目里 eslint 的早和自动校验竟然没有生效，怎么回事？

发现在文件开头 import 下面有红色波浪线，显示：

提示我 eslint 没有开启。

View - appearance - show status bar 打开 vscode 的底部状态栏，森睁稿果然 eslint 显示禁用，点击后选择 Allow Everywhere 即此孝可。

附 vscode 快捷指令：

command + shift + p 打开指令输入框。

输入 open settings 打开设置文件。

一些设置更改了以后要重启才生效，实际上输入 reload window 重新加载窗口即可。

[img]

vue VSCode 开发设置（html自动补全、eslint保存时格式化、vetur 格式化html）

File - Preference - Setting -搜索setting.json - Edit in settings.json

settings.json

方法1：File - Preference - Setting -搜索setting.json - Edit in settings.json

settings.json

Setting.json

方法2：File - Preference - 搜索框输入：files.autoSave

之后能看到 files.autoSave 的可选项有

off : 关闭自动保存（默认）

afterDelay: 延迟xx时间后保存，可在 "files.autoSaveDelay" 中配置延迟时间；

onFocusChange: 编辑器失去焦点时自动保存；

onWindowChange: 窗口失去焦点时(编辑器窗口的切换，桌面窗口的切换)自动保存；

安装 ESLint

vscode 中安装 ESLint 插件

然后配置 vscode 的 setting.json

File - Preference - User Snippers

vue.json文件，然后添加下面模板

然后新建.vue文件 ，写下vue然后Tap键就能生成什么的模板。

如果没有生成模板只是多了个空格或者生成的是vue标签的话，我们还得设置一下，打开settings.json，添加下面的设置

如果你的Setting.json文逗租件有 "files.associations" 设置的话，请删除，因为他会和上面 emmet.syntaxProfiles 冲突。

files.associations 和 emmet.syntaxProfiles 都是设置html 标签的补全山带兆，如果是要用.vue模板补全功能的话，html标签补全我们就用 emmet.syntaxProfiles 来设置。

vue 的开发中 vscode 可装用于开发规范的插件有

Prettier ：规范js

ESLint: 规范js

Vuter: 规范 .vue 文件中 template

stylus: 规范 stylus

注意：以下配置是基于接下来介绍的插件设置的，如果没有安装插件是不会生效的。

或者：

其中：

4.如果使用了stylus，那么vscode安装stylus插件，进行设置，不适用冒号双引号大括号

根目录下行行创建eslint规则文件 .eslintrc.js

（下面browsers 多了s 正确的为 browser ）

vscode使用v-for报错的问题解决

打开左弊伍下角的设置，在搜索设置处搜索 vetur.validation.template 并把默认处于选中状态的勾勾取消选中即可。修改后状态如图所示局旦：桐卜扰

华为padvscode配置

华为padvscode配置

想要优雅且高效的编写代码，必须熟练使用一款前端开发工具。但前端开发工具数不胜数，像HBuilder、Sublime Text、WebStorm、Visual Studio Code......等等,其中VSCode以其轻量且强大的代码编辑功能和丰富的插件生态系统，独受前端工师的青睐。网上有很多vscode的配置以及使用博客，但都没有本篇那么详细且全面。

软件下载

直接在官网进行下载

Visual Studio Code - Code Editing. Redefined

最近很多人留言说官网下载被限速，如果大家存在这种情况，可以在“前端码头”后台发送vscode获取软件包。

首页

vscode设置成中文

vscode默认的语言是英文，对于英文不好的小伙伴可能不太友好。简单几步教大家如何将vscode设置成中文。

按快捷键“Ctrl+Shift+P”。

在“vscode”顶部会出现一个搜索框。

输入“configure language”，然后回车。

“vscode”里面就会打开一个语言配置文件。

将“en-us”修改成“zh-cn”。

按“Ctrl+S”保存设置。

关闭“vscode”，再次打开就可以看到中文界面了。

当然亮扮春如果你不愿意设置，也可以直接安装它的中文插件，还是很人性化的。

VScode用户设置

1. 打开设置

文件--首选项--设置，打开用户设置。VScode支持选择配置，也支持编辑setting.json文件修改默认配置。个人更倾向于编写json的方式进行配置，下面会附上我个人的配置代码

这里解析几个常用配置项：

（1）editor.fontsize用来设置字体大小，可以设置editor.fontsize : 14;

（2）files.autoSave这个属性是表示文件是否进行自动保存，推荐设置为onFocusChange——文件焦点变化时自缺升动保存。

（3）editor.tabCompletion用来在出现推荐值时，按下Tab键是否自动填敬耐入最佳推荐值，推荐设置为on;

（4）editor.codeActionsOnSave中的source.organizeImports属性，这个属性能够在保存时，自动调整 import 语句相关顺序，能够让你的 import 语句按照字母顺序进行排列，推荐设置为true,即"editor.codeActionsOnSave": { "source.organizeImports": true }；

（5）editor.lineNumbers设置代码行号,即editor.lineNumbers ：true；

我的个人配置，供参考：

{ "files.associations": { "*.vue": "vue", "*.wpy": "vue", "*.wxml": "html", "*.wxss": "css" }, "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe", "git.enableSmartCommit": true, "git.autofetch": true, "emmet.triggerExpansionOnTab": true, "emmet.showAbbreviationSuggestions": true, "emmet.showExpandedAbbreviation": "always", "emmet.includeLanguages": { "vue-html": "html", "vue": "html", "wpy": "html" }, //主题颜色 //"workbench.colorTheme": "Monokai", "git.confirmSync": false, "explorer.confirmDelete": false, "editor.fontSize": 14, "window.zoomLevel": 1, "editor.wordWrap": "on", "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, //失去焦点后自动保存 "files.autoSave": "onFocusChange", // #值设置为true时，每次保存的时候自动格式化； "editor.formatOnSave": false, //每120行就显示一条线 "editor.rulers": [ ], // 在使用搜索功能时，将这些文件夹/文件排除在外 "search.exclude": { "**/node_modules": true, "**/bower_components": true, "**/target": true, "**/logs": true, }, // 这些文件将不会显示在工作空间中 "files.exclude": { "**/.git": true, "**/.svn": true, "**/.hg": true, "**/CVS": true, "**/.DS_Store": true, "**/*.js": { "when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中 }, "**/node_modules": true }, // #让vue中的js按"prettier"格式进行格式化 "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatterOptions": { "js-beautify-html": { // #vue组件中html代码格式化样式 "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样 "wrap_line_length": 200, "end_with_newline": false, "semi": false, "singleQuote": true }, "prettier": { "semi": false, "singleQuote": true } } }

最近经常有人微信问我，这个配置代码写在哪里？

新版的vscode设置默认为UI的设置，而非之前的json设置。如果你想复制我上面这段代码进行配置，可以进行下面的修改

文件首选项设置 搜索workbench.settings.editor，选中json即可改成json设置；

禁用自动更新

文件 首选项 设置（macOS：代码 首选项 设置，搜索update mode并将设置更改为none。

开启代码提示设置

第一步：点击左下角点击设置图标，找到并点击“setting”

第二步：到搜索框里搜索“prevent”---并取消此项的勾选

常用的快捷键

高效的使用vscode,记住一些常用的快捷键是必不可少的，我给大家罗列了一些日常工作过程中用的多的快捷键。

以下以Windows为主，windows的 Ctrl，mac下换成Command就行了

对于 行 的操作：

重开一行：光标在行尾的话，回车即可；不在行尾，ctrl + enter 向下重开一行；ctrl+shift + enter 则是在上一行重开一行

删除一行：光标没有选择内容时，ctrl + x 剪切一行；ctrl +shift + k 直接删除一行

移动一行：alt + ↑ 向上移动一行；alt + ↓ 向下移动一行

复制一行：shift + alt + ↓ 向下复制一行；shift + alt + ↑ 向上复制一行

ctrl + z 回退

如何优雅地使用 VSCode 来编辑 vue 文件

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

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

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

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

vue文件中 template 部分使用了大量的自定义标乱裂签（自定义组件）和自定义属性，会报一堆 warning

经常性卡死

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

如何安装 vscode

很简单，传送门： 官网下载安装

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

这里，我试过好3个插件： vue , VueHelper 和 vetur ，最终选择使用 vetur 。

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

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

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

"emmet.syntaxProfiles": {

"vue-html": "html",

"vue": "html"

}

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

如差尘果被识别为 text 或 html ，则记得要点击切换下。

第二步，要支持 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 也是有两个： build 和 watch ，简单配置如下：

{

//哗庆闭 See

// 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 的实时构建中会报错：

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

如何通过 problemMatcher 把这个错误给抓出来？

如何找到错误对应的行号？（如果可能的话，还有列号）

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.js 和 build/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 ..") 的打印。

关于vscodevetur和vscodevetur插件的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。