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

主要从两个技巧说明

1. 代码格式化
2. 自动生成代码块

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

1 代码格式化

1.1 eslint修改

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

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": [
            "\n",
            "\n",
            "",
            "$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扩展工具)