前言

成都一家集口碑和实力的网站建设服务商，拥有专业的企业建站团队和靠谱的建站技术，十载企业及个人网站建设经验 ,为成都上1000家客户提供网页设计制作,网站开发,企业网站制作建设等服务,包括成都营销型网站建设，品牌网站设计，同时也为不同行业的客户提供成都网站设计、做网站的服务,包括成都电商型网站制作建设,装修行业网站制作建设，传统机械行业网站建设,传统农业行业网站制作建设。在成都做网站,选网站制作建设服务商就选创新互联公司。

在vscode的vue项目中，关于代码检查和格式化，遇到各种各样的问题，比如：

• 不清楚安装的拓展的功能，导致安装了重复功能的拓展
• 右键格式化文档的时候，不是按eslint的规则来格式化，导致需要我再次手动调整
• 保存时不能自动修复代码

以下通过自己的实践，进行了相应配置，目前可以实现：

• 仅安装2个推荐的拓展
• 右键格式化文档按照eslint规则，不会产生错误
• 保存时自动修复代码

vscode 拓展安装

eslint 拓展

该拓展本身不带任何插件，当前项目要使用该拓展，需要安装相应的npm包（全局安装或当前项目安装）

对于 vue 项目，通常在 vscode 中做如下设置:

 //保存时自动修复代码
 "eslint.autoFixOnSave": true,
 "eslint.options": {
  // 应检查代码的文件扩展名数组
  "extensions": [
   ".js",
   ".vue"
  ]
 },
 // 配置要验证的语言标识和自动修复选项，比前面两个配置的结合更为细粒度话。可以仅配置下面代码
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  "html",
  {
   "language": "vue",
   "autoFix": true
  }
 ],

vetur 拓展

vue 工具，主要有以下功能

Syntax-highlighting 语法高亮

Snippet 快速定义脚手架代码片段，如：写script后会跳出export default{xxx},style 后面会带lang、scope等

Emmet 仿css选择器快速生成 html/css 代码

Linting / Error Checking vetur的 Linting 仅用于快速启动，对于规则配置需要用eslint.validate

Linting 不可配置，且自带了一个固定版本的eslint-plugin-vue，一般我们不用。而是采用以下配置：

• vscode中设置"vetur.validation.template": false
• 安装ESlint拓展，错误处理将走eslint
• 项目中安装npm i -D eslint eslint-plugin-vue插件
• 在.eslintrc.*设置eslint规则,后面会介绍eslintrc相关配置

Formatting 即右键的Format Document功能，不支持格式化选中内容。

可以在设置中配置vetur.format.defaultFormatter \ 如：默认"vetur.format.defaultFormatter.html": "prettyhtml",也可将值设为 none 就不会格式化该类文件了 \ 这个默认设置非常难用，会将vue文件变得很乱，比如默认加分号，属性按列展开；我们在设置中进行如下配置即可实现格式化vue文件时按eslint的规则来

"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 属性列太长才折行,默认的force-expand-multiline不美观
"wrap_attributes": "auto"
},
"prettier": {
//去掉代码结尾分号
"semi": false,
//使用eslint的代码格式进行校验
"eslintIntegration": true,
//采用单引号
"singleQuote": true
}
},
//格式化.vue中html，js
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
//让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,

IntelliSense 智能感知vue文件结构,比如