Vue 高效开发之 代码格式化Settings.json配置

前言

对于vue开发初学者来讲，着手没写几行代码。wtf?控制台一大片的warning警告，但是又不会影响运行的结果。提示的都是格式书写问题，可是代码的规范书写习惯是慢慢养成的。没有必要空格、分号等标点上过分的浪费时间。那么下面的懒人配置推荐给大家~！

---

简介

当我们使用vue提供的脚手架来创建项目的时候，会给我们一些推荐的配置。比如：

1、 eslint

书写代码的时候提供一些代码提示

2、prettier

格式化代码的工具，让书写的code更加美观

3、Vetur

针对 VS Code开发的格式化代码的工具，需要在软件中去安装

配置

VS Code 文件 -> 首选项 -> 设置 -> 用户设置栏 -> 扩展 -> Vetur

打开文件加入如下配置：

{
    // tab 大小为2个空格
    "editor.tabSize": 2,
    // 100 列后换行
    "editor.wordWrapColumn": 100,
    // 保存时格式化
    "editor.formatOnSave": true,
    // 开启 vscode 文件路径导航
    "breadcrumbs.enabled": true,
    // prettier 设置语句末尾不加分号
    "prettier.semi": false,
    // prettier 设置强制单引号
    "prettier.singleQuote": false,
    // 选择 vue 文件中 template 的格式化工具
    "vetur.format.defaultFormatter.html": "prettyhtml",
    // 显示 markdown 中英文切换时产生的特殊字符
    "editor.renderControlCharacters": true,
    // 设置 eslint 保存时自动修复
    "eslint.autoFixOnSave": true,
    // eslint 检测文件类型
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    // vetur 的自定义设置
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "singleQuote": false,
            "semi": true
        }
    }
}

完成

在Vue文件中 ctrl+s 保存一下，你会惊奇的发现。

变量名称全部自动更改为双引号“ ”，代码后面结束分号 ; 在也不用担心漏掉报错了。

开启你的coding之旅吧！