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

栏目: JavaScript · 发布时间: 5年前

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

原文地址: https://liubing.me/vscode-vue...

VsCode算是比较热门的一个代码编辑器了,全名Visual Studio Code,微软出品,下载地址: 点我去下载

插件众多,功能齐全,平常开发过程中都是用的它,整理了下日常使用的插件及配置供大家参考,废话就不多说了,直接进入正题。

相关插件

Vetur

插件文档地址: https://marketplace.visualstudio.com/items?itemName=octref.vetur

Vetur不用说了吧,开发Vue必装的一个插件

未安装之前vue文件显示这样的

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

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

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

Vue 2 Snippets

插件文档地址: https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets

主要加强vue的便捷写法

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

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

language-stylus

插件文档地址: https://marketplace.visualstudio.com/items?itemName=sysoev.language-stylus

写stylus用的,如果项目用的stylus写样式推荐安装,其他Sass、LESS等同理安装相应的插件即可。

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

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

Auto Close Tag

插件文档地址: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

自动闭合标签所用

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

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

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

Auto Rename Tag

插件文档地址: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

自动修改重命名配对的标签

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

Bookmarks

插件文档地址: https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

可以对成片的代码做一些书签标记,方便后续查看。

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

Bracket Pair Colorizer

插件文档地址: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

对括号进行着色,方便区分,下面的图分别是安装前后的比较

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

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

Copy Relative Path

插件文档地址: https://marketplace.visualstudio.com/items?itemName=alexdima.copy-relative-path

用于复制文件的完整路径和相对路径,有时候我们可能需要复制一些文件的路径,该插件就很方便了。

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

Path Intellisense

插件文档地址: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

路径自动感知,在配置文件中配置 @ 后我们就可以很方便快捷的引用各种文件了

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

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

Document This

插件文档地址: https://marketplace.visualstudio.com/items?itemName=joelday.docthis

主要用于方法的注释,选中方法名,按两次 Ctrl+Alt+D ,即可快速生成标准的注释

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

psioniq File Header

插件文档地址: https://marketplace.visualstudio.com/items?itemName=psioniq.psi-header

按两次 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>>"
    ]
  }
]

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

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

Vue Peek

插件文档地址: https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek

用于Vue快速查看组件定义以及组件跳转,具体使用见插件文档地址中的使用方法。

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

JavaScript (ES6) code snippets

插件文档地址: https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

用于快速生成ES6代码片段

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

Material Icon Theme

插件文档地址: https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Material风格的icon文件图标,可以看下安装前后的区别。

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

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

ESLint

插件文档地址: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

这个不用多说了,规范代码格式的。

StandardJS - JavaScript Standard Style

插件文档地址: https://marketplace.visualstudio.com/items?itemName=chenxsan.vscode-standardjs

作为一个合格的前端开发,得遵循一定得代码规范,这里推荐 StandardJS ,配合该插件可以自动将你的代码格式化成规范的代码。

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

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

Beautify

插件文档地址: https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

主要拿它来格式话html的,也可以格式话 vue `template 中的html<br />配合 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模式

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

force模式

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

force-aligned模式

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

force-expand-multiline模式

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

vscode-element-helper

插件文档地址: https://marketplace.visualstudio.com/items?itemName=ElemeFE.vscode-element-helper

用element-ui的,应该都知道这个插件,功能看图就知道了。

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

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

Version Lens

插件文档地址: https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens

显示npm,jspm,bower,dub和dotnet核心的软件包版本信息

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

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

One Dark Pro

插件文档地址: https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme

一款热门的主题,安装前后比较。

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

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

相关配置

{
    // 编辑器默认设置
    "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-sync

安装完成后需要做些其他事情:

创建GitHub Gist ID

点我去创建

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

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

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

上传设置

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

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

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

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

完整步骤Gif

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

下载设置

Shift + Alt + D ,它将询问您的GitHub Gist ID(我们在步骤 创建GitHub Gist ID 中生成的一个ID)

在窗口中输入该GitHub Gist ID,然后回车。

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

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

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

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

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

插件配置

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

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

结语

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Just My Type

Just My Type

Simon Garfield / Profile Books / 2010-10-21 / GBP 14.99

What's your type? Suddenly everyone's obsessed with fonts. Whether you're enraged by Ikea's Verdanagate, want to know what the Beach Boys have in common with easy Jet or why it's okay to like Comic Sa......一起来看看 《Just My Type》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器