【Vscode】 前端项目文件自动格式化(.Vue，.js)

【工欲善其事，必先利其器】大家用什么来开发前端项目呢，WebStorm， Atom, 还是Sublime ，这里面哪个不是大名鼎鼎，但是论轻量级，论不要钱的，论生态，Visual Studio Code都是相当强大的，VSCode这款超级编辑器，正在蚕食市场上所有IDE和编辑器的市场。只要插件运用得当，vscode也能达到商业软件效果。

1.引言

开发vue项目，大家有没有遇到如下情况：

1.1 注释不对

在vue文件，template中注释Ctrl+/代码

//<slot name="left" :itemLeft="itemLeft">{{ itemLeft }}</slot>

这是html代码，注释应该是这样：

 <!-- <slot name="left"
                :itemLeft="itemLeft">{{ itemLeft }}</slot>

1.2 Eslint一堆错误

• 字符串必须使用单引号，Strings must use singlequote.eslint
• 结尾不要使用分号，Extra semicolon

1.3 配置的目标

我们配置需要达到的目标

• 编辑vue，js
• 保存
• 自动格式化
  • JavaScript中，双引号自动改单引号，分号自动去掉
  • vue，模板中标签属性换行

2.安装插件

2.1 Prettier

它通过解析代码并使用自己的规则重新打印它，并考虑最大行长来强制执行一致的样式，并在必要时包装代码。如今，它已成为解决所有代码格式问题的优选方案；支持 JavaScript、 Flow、 TypeScript、 CSS、 SCSS、 Less、 JSX、 Vue、 GraphQL、 JSON、 Markdown 等语言.这里我们需要让Prettier和Eslint结合，检测代码中潜在问题的同时，还能统一团队代码风格，从而促使写出高质量代码，来提升工作效率。我们要的不仅是检测问题，还有就是自动修复问题。

2.2 ESLint

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。更详尽的参考ESlint中文网

2.3 Vetur

vscode下一款优秀的vue开发插件，具有如下特征

• 语法高亮
• Snippet
• Emmet
• 错误检测
• 格式化
• 智能感知
• ...

更详尽的参考官方文档

3.配置

• Ctrl+Shift+P
• 搜索settings.json
• 选择Prefrerences：Open Settings(JSON)

有UI操作步骤，有兴趣的童鞋可以试试File-Prefrerences-Settings

然后把如下配置复制保存

{
    "editor.fontSize": 17,//编辑器字体大小
    "[scss]": {
        "editor.defaultFormatter": "michelemelluso.code-beautifier"
    },//scss格式化工具
    "workbench.iconTheme": "vscode-icons",//vscode文件图标主题
    "terminal.integrated.shell.windows": "C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe",//默认终端shell
    "go.formatTool": "goimports",//golang格式化工具
    "editor.defaultFormatter": "esbenp.prettier-vscode", //编辑器格式化工具
    "[javascript]": {
      "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    },//javascript格式化工具
    "[vue]": {
      "editor.defaultFormatter": "octref.vetur"
    },//vue格式化工具
    "editor.insertSpaces": false,
    "workbench.editor.enablePreview": false, //打开文件不覆盖
    "search.followSymlinks": false, //关闭rg.exe进程
    "editor.minimap.enabled": false, //关闭快速预览
    "files.autoSave": "afterDelay", //编辑自动保存
    "editor.lineNumbers": "on", //开启行数提示
    "editor.quickSuggestions": {
      //开启自动显示建议
      "other": true,
      "comments": true,
      "strings": true
    },
    "editor.tabSize": 2, //制表符符号eslint
    "editor.formatOnSave": true, //每次保存自动格式化
    // "eslint.codeActionsOnSave": {
    //     "source.fixAll.eslint": true
    // },
    "prettier.eslintIntegration": true, //让prettier使用eslint的代码格式进行校验
    "prettier.semi": true, //去掉代码结尾的分号
    "prettier.singleQuote": false, //使用单引号替代双引号
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true, //让函数(名)和后面的括号之间加个空格
    "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html
    "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatterOptions": {
      "js-beautify-html": {
        "wrap_attributes": "force-aligned" //属性强制折行对齐
      },
      "prettier": {
        "semi": false,
        "singleQuote": true
      },
      "vscode-typescript": {
        "semi": false,
        "singleQuote": true
      }
    },
    "eslint.validate": [
      "vue",
      // "javascript",
      "typescript",
      "typescriptreact",
      "html"
    ],
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
}

4.试试吧

• 来看看我的vue代码,先看template部分

<template>
  <div>
    推送管理 -> 移动推送
    <Table border ref="selection" :loading="loading" :columns="insideColumns" :data="insideTableData"></Table>
    <Button @click="handleSelectAll(true)">设置全选</Button>
    <Button @click="handleSelectAll(false)">取消全选</Button>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page :total="totals" :page-size="pageSize" show-sizer show-total @on-change="changePage" @on-page-size-change="pagesizechange"></Page>
      </div>
    </div>
  </div>
</template>

• 再Ctrl+S,变化很明显

<template>
  <div>
    推送管理 -> 移动推送
    <Table border
           ref="selection"
           :loading="loading"
           :columns="insideColumns"
           :data="insideTableData"></Table>
    <Button @click="handleSelectAll(true)">设置全选</Button>
    <Button @click="handleSelectAll(false)">取消全选</Button>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page :total="totals"
              :page-size="pageSize"
              show-sizer
              show-total
              @on-change="changePage"
              @on-page-size-change="pagesizechange"></Page>
      </div>
    </div>
  </div>
</template>

• 再看javascript代码部分

import {getNotifyTableData} from '@/api/data'
export default {
  data() {
    return {
      loading: false,
      insideColumns: [
        {
          type: "selection",
           60,
          align: 'center'
        }
      ],
      insideTableData: [],
      pageIndex: 1,
      pageSize: 10,
      totals: 0
    }
  }

• 再Ctrl+S

import { getNotifyTableData } from '@/api/data'
export default {
  data () {
    return {
      loading: false,
      insideColumns: [
        {
          type: 'selection',
           60,
          align: 'center'
        }
      ],
      insideTableData: [],
      pageIndex: 1,
      pageSize: 10,
      totals: 0
    }
  }
}

这里不仔细看，可能不知道变化，注意看data与()的空格，selection双引号变单引号，如果有分号，也会被去掉。

在style script template三部分中分别使用注释快捷键，css会变/* */,js 会变//,html会变<!-- -->

工欲善其事，必先利其器，这下vscode就将成为您开发vue的神器。

参考链接

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

https://www.jianshu.com/p/d98e0b0139fb?utm_source=oschina-app

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

https://marketplace.visualstudio.com/items?itemName=octref.vetur