vue开发之一：基础篇，vs code开发vue，实战中基本配置，熟悉vs的入门级使用

背景：公司使用前后端分离技术，前端使用vue，在跳转时明显体验更好，传统网页，容易出现空白页，公司采用cs code开发，

这块记录下一份公司要求的基础设置，主要是为了代码规范，同时提高效率,这个文档可以帮助你熟悉vs的使用

 

1）安装vue插件vetur，实现支持vue文件的代码高亮，在插件窗口中（快捷键是ctrl+shift+x）输入vetur点击安装插件就行

 

2）ESLint 插件

点击设置

搜索prettier

将js.ts设置为prettier-eslint

 

 

 

Setting.json中添加以下配置

//打开文件不覆盖

  "workbench.editor.enablePreview": false,

  //关闭快速预览

  "editor.minimap.enabled": false,

  //打开自动保存

  "files.autoSave": "afterDelay",

  // 头部注释

  "fileheader.customMade": {

    "Author": "yhy",

    "Date": "Do not edit", // 设置后默认设置文件生成时间

    "LastEditTime": "Do not edit", // 设置后，保存文件更改默认更新最后编辑时间

    "LastEditors": "yhy", // 设置后，保存文件更改默认更新最后编辑人

    "Description": ""

  },

  // 函数注释

  "fileheader.cursorMode": {

    "description": "",

    "param": "",

    "return": ""

  },

  //手机项目rem适配

  "px-to-rem.px-per-rem": 100,

  // -----------------------自动格式化配置eslint+prettier-----------------------

  // 每次保存自动格式化ctrl+s

  "editor.formatOnSave": true,

  // 每次保存的时候将代码按eslint格式进行修复

  "editor.codeActionsOnSave": {

    "source.fixAll.eslint": true

  }

 

3）Auto Close Tag 自动闭合HTML/XML标签

4）Auto Rename Tag 自动完成另一侧标签的同步修改

 

5）Debugger for Chrome 映射VSCode上的断点到chrome上，方便调试

6）语言的修改

Ctrl+Shift+P ，切入到命令行模式，输入“Configure Language”，然后点击下拉框出来的 Configure Display Language，下载新的语言包