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

本文轉載自查看原文 2020-05-12 01:01 6660 玩轉vscode

【工欲善其事，必先利其器】大家用什么來開發前端項目呢，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",
          width: 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',
          width: 60,
          align: 'center'
        }
      ],
      insideTableData: [],
      pageIndex: 1,
      pageSize: 10,
      totals: 0
    }
  }
}

這里不仔細看，可能不知道變化，注意看data與()的空格，selection雙引號變單引號，如果有分號，也會被去掉。

在style script template三部分中分別使用注釋快捷鍵，css會變/* */,js 會變//,html會變

工欲善其事，必先利其器，這下vscode就將成為您開發vue的神器。