VsCode 从零开始配置一个属于自己的 Vue 开发环境

Bing🐣VsCodeVueVsCode大约 7 分钟

VsCode 从零开始配置一个属于自己的 Vue 开发环境

VsCode 算是比较热门的一个代码编辑器了,全名 Visual Studio Code,微软出品 下载地址:点我去下载open in new window 插件众多,功能齐全,平常开发过程中都是用的它,整理了下日常使用的插件及配置供大家参考, 废话就不多说了,直接进入正题。

相关插件

Vetur

插件文档地址:https://marketplace.visualstudio.com/items?itemName=octref.veturopen in new window Vetur 不用说了吧,开发 Vue 必装的一个插件 未安装之前 vue 文件显示这样的

image
image

安装完成后显示这样的,看着舒服多了

image
image

Vue 2 Snippets

插件文档地址:https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippetsopen in new window 主要加强 vue 的便捷写法

image
image
image
image

language-stylus

插件文档地址:https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylusopen in new window 写 stylus 用的,如果项目用的 stylus 写样式推荐安装,其他 Sass、LESS 等同理安装相应的插件即可。

image
image
image
image

Auto Close Tag

插件文档地址:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tagopen in new window 自动闭合标签所用

image
image

配合快捷键Alt+. (Command+Alt+. for Mac)特别好使。

image
image

Auto Rename Tag

插件文档地址:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tagopen in new window 自动修改重命名配对的标签

image
image

Bookmarks

插件文档地址:https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarksopen in new window 可以对成片的代码做一些书签标记,方便后续查看。

image
image

Bracket Pair Colorizer

插件文档地址:https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizeropen in new window 对括号进行着色,方便区分,下面的图分别是安装前后的比较

image
image
image
image

Copy Relative Path

插件文档地址:https://marketplace.visualstudio.com/items?itemName=alexdima.copy-relative-pathopen in new window 用于复制文件的完整路径和相对路径,有时候我们可能需要复制一些文件的路径,该插件就很方便了。

image
image

Path Intellisense

插件文档地址:https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisenseopen in new window 路径自动感知,在配置文件中配置@后我们就可以很方便快捷的引用各种文件了

"path-intellisense.mappings": {
  "@": "${workspaceRoot}/src"
}
image
image

Document This

插件文档地址:https://marketplace.visualstudio.com/items?itemName=joelday.docthisopen in new window 主要用于方法的注释,选中方法名,按两次Ctrl+Alt+D,即可快速生成标准的注释

image
image

psioniq File Header

插件文档地址:https://marketplace.visualstudio.com/items?itemName=psioniq.psi-headeropen in new window 按两次Ctrl+Alt+H可快速在文件的头部生成注释信息,如果对默认的注释模板不满意的话,可以在配置文件中自定义注释模板

"psi-header.templates": [
  {
    "language": "*",
    "template": [
      "FileName: <<filename>>",
      "Remark: <<filename>>",
      "Project: <<projectname>>",
      "Author: <<author>>",
      "File Created: <<filecreated('dddd, Do MMMM YYYY h:mm:ss a')>>",
      "Last Modified: <<dateformat('dddd, Do MMMM YYYY h:mm:ss a')>>",
      "Modified By: <<author>>"
    ]
  }
]
image
image
image
image

Vue Peek

插件文档地址:https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peekopen in new window 用于 Vue 快速查看组件定义以及组件跳转,具体使用见插件文档地址中的使用方法。

image
image

JavaScript (ES6) code snippets

插件文档地址:https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippetsopen in new window 用于快速生成 ES6 代码片段

image
image

Material Icon Theme

插件文档地址:https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-themeopen in new window Material 风格的 icon 文件图标,可以看下安装前后的区别。

image
image
image
image

ESLint

插件文档地址:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslintopen in new window 这个不用多说了,规范代码格式的。

StandardJS - JavaScript Standard Style

插件文档地址:https://marketplace.visualstudio.com/items?itemName=chenxsan.vscode-standardjsopen in new window 作为一个合格的前端开发,得遵循一定得代码规范,这里推荐StandardJSopen in new window

vue-cli-3 脚手架创建项目的时候,可以选择这个规范。

image
image

Beautify

插件文档地址:https://marketplace.visualstudio.com/items?itemName=HookyQR.beautifyopen in new window 主要拿它来格式话 html 的,也可以格式话vue template中的 html 配合vetur插件,需要做些设置,格式化 html 支持以下四种模式 auto|force|force-aligned|force-expand-multiline

"vetur.format.defaultFormatterOptions": {
  //beautify设置
  "js-beautify-html": {
    "wrap_attributes_indent_size": 2,
      "wrap_attributes": "force-expand-multiline" // auto|force|force-aligned|force-expand-multiline
  }
}

auto 模式

image
image

force 模式

image
image

force-aligned 模式

image
image

force-expand-multiline 模式

image
image

vscode-element-helper

插件文档地址:https://marketplace.visualstudio.com/items?itemName=ElemeFE.vscode-element-helperopen in new window 用 element-ui 的,应该都知道这个插件,功能看图就知道了。

image
image
image
image

Version Lens

插件文档地址:https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlensopen in new window 显示 npm,jspm,bower,dub 和 dotnet 核心的软件包版本信息

image
image
image
image

One Dark Pro

插件文档地址:https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-themeopen in new window 一款热门的主题,安装前后比较。

image
image
image
image

相关配置

{
  // 编辑器默认设置
  "editor.tabSize": 2, // 设置2个空格统一tabSize
  "javascript.validate.enable": false, // 关闭默认的校验
  "workbench.editor.enablePreview": false, // 关闭文件预览
  // 引用路径设置
  "path-intellisense.mappings": {
      "@": "${workspaceRoot}/src",
      "~": "${workspaceRoot}/src",
      "src": "${workspaceRoot}/src"
  },
  // standard自动保存
  "standard.autoFixOnSave": true,
  // psioniq File Header设置
  "psi-header.templates": [{
      "language": "*",
      "template": [
          "FileName: <<filename>>",
          "Remark: <<filename>>",
          "Project: <<projectname>>",
          "Author: <<author>>",
          "File Created: <<filecreated('dddd, Do MMMM YYYY h:mm:ss a')>>",
          "Last Modified: <<dateformat('dddd, Do MMMM YYYY h:mm:ss a')>>",
          "Modified By: <<author>>"
      ]
  }],
  // vetur设置
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatterOptions": {
      //beautify设置
      "js-beautify-html": {
          "wrap_attributes_indent_size": 2,
          "wrap_attributes": "force-expand-multiline" // auto|force|force-aligned|force-expand-multiline
      }
  },
  // eslint设置
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      {
          "language": "vue",
          "autoFix": true
      }
  ],
  // 保存后自动格式化
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true,

  "workbench.iconTheme": "material-icon-theme", // icon图标
  "workbench.colorTheme": "One Dark Pro" // 编辑器主题
}

备份及同步

忙活半天把上面的插件都装上及配置好,下次换新电脑的时候总不能重新再来一遍吧,所以压轴插件登场 Settings Sync 插件文档地址:https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-syncopen in new window 安装完成后需要做些其他事情:

创建 GitHub Gist ID

点我去创建open in new window

image
image

创建完成后有个提示,一定要将红色框所示的 token 记录下来,不然下次就看不到了。

image
image

上传设置

Shift + Alt + U,会出现一个出入 token 的框,将上面我们创建的 token 输入后回车。

image
image

完成后会给你生成一个 GIST ID,将这个 GIST ID 记录下来,下次需要在其他电脑上恢复数据的时候需要用到。

image
image

完整步骤 Gif

image
image

下载设置

Shift + Alt + D,它将询问您的 GitHub Gist ID(我们在步骤创建GitHub Gist ID中生成的一个 ID) 在窗口中输入该 GitHub Gist ID,然后回车。

image
image

提示需要输入您的 Gist ID(上面上传设置后生成的一个 ID)

image
image

下载可能会需要点时间,完整过程 Gif

image
image

插件配置

最后可以按照自己的需求配置自动上传与自动下载

"sync.autoDownload": false,// 是否自动下载
"sync.autoUpload": false// 是否自动上传

结语

至此教程就结束了,后面有其他问题或者有用的插件会补充进去。

评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.7