vs code 打造舒适的vue开发环境

最新推荐文章于 2025-06-20 19:59:00 发布

事在人为2018

最新推荐文章于 2025-06-20 19:59:00 发布

阅读量4.7w

点赞数 11

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vs code vue

本文链接：https://blog.youkuaiyun.com/qq_36256944/article/details/80553774

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在VSCode中配置Vue项目，包括代码格式化工具的安装与设置，以及如何利用snippet快速生成Vue组件代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要从两个技巧说明

代码格式化
自动生成代码块

以vue-cli创建的项目为例，项目结构如下

1 代码格式化

1.1 eslint修改

vue推荐使用eslint standard风格的代码，根据个人喜好对eslint做一些修改，打开项目根目录中的.eslintrc.js文件，在rules中添加"space-before-function-paren": ["error", "never"]，目的是为了让eslint检查在函数名和括号之间不能有空格，如图：

.eslintrc.js

1.2 安装vs code扩展工具

共用到三个扩展工具vetur、Prettier - Code formatter和ESLint，如图：

这里写图片描述
点击安装这三个工具，并重新加载。

1.3 vs code用户设置

打开设置界面：vs code文件–>首选项–>设置，如图：
这里写图片描述
在打开的窗口中的“用户设置”中加入下面内容：

{
    // prettier:每行在这个字符数内整合代码，如果你的屏幕较宽分辨率较高可以适当加大
    "prettier.printWidth": 120,
    // prettier:是否在每行末尾加上分号
    "prettier.semi": false,
    // prettier:如果为true，将使用单行否则使用双引号
    "prettier.singleQuote": true,
    // vetur:对html的内容使用js-beautify-html
    "vetur.format.defaultFormatter.html": "js-beautify-html"
}

如图：
这里写图片描述

1.4 试一试

打开src/components/HelloWorld.vue文件试一试，按下Alt+Shift+F，代码工工整整的格式化了，从此所有的文件都可以Alt+Shift+F一键格式化了，严格来说是三键格式化。

2 自动生成代码块

使用vs code - snippet生成代码块。以生成一个vue组件的基本内容为例。

2.1 打开snippet - vue

在vs code中，使用快捷键Ctrl+Shift+P打开搜索栏–>输入snippet–>选择首选项，如图：
这里写图片描述
打开了snippet搜索栏–>输入vue–>选择vue.json，如图

2.2 输入需要生成的vue组件内容

在打开的vue.json中输入下面内容：

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div>\n",
            "  </div>",
            "</template>\n",
            "<script>",
            "export default {",
            "  data() {",
            "    return {\n",
            "    }",
            "  },",
            "  methods: {\n",
            "  },",
            "  components: {\n",
            "  }",
            "}",
            "</script>\n",
            "<style>\n",
            "</style>",
            "$2"
        ],
        "description": "创建一个自定义的vue组件代码块"
    }
}

如图：
这里写图片描述

2.3 试一试

准备完毕，现在来试一下，在src/components/中创建Test.vue文件，输入vue，然后按回车键，如图：
这里写图片描述
接下来就可以看到一段完整的vue组件代码被生成了，如图：

可根据自己的需求来定制vue，当然也可以创建其它的代码块。

作者：郎福涛
日期：2018年6月3日
操作系统：windows7
相关软件：
Visual Studio Code 1.23.1
nodejs v8.9.4
npm 6.1.0
vue 2.9.5
vue-cli 2.9.3
eslint 4.15.0
Prettier - Code formatter 1.12.0（Visual Studio Code扩展工具)
ESLint 1.4.10（Visual Studio Code扩展工具)
Vetur 0.12.3（Visual Studio Code扩展工具)