成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Prettier+VScode 治好你的代碼潔癖

qc1iu / 1233人閱讀

摘要：忍無可忍只能拔槍相見了。而只關(guān)心格式化文件最大長度混合標(biāo)簽和空格引用樣式等?？梢姡a格式統(tǒng)一的問題，交給再合適不過了。和配合使用，風(fēng)味更佳。我的配置文件如下到此，安裝完畢，使用就可格式化代碼。兩者配合才能使項目代碼優(yōu)雅健壯

試想一個多人開發(fā)的項目，每次同步代碼，看到各個風(fēng)格迥異，換行空格混亂，4格，2格縮進(jìn)交替上演的代碼文件，分分鐘逼死強(qiáng)迫癥啊。忍無可忍只能拔槍相見了~~。統(tǒng)一的代碼風(fēng)格規(guī)范，對于多人開發(fā)的大項目一定是必不可少的，但是口頭約定又是一定沒有用的（nice臉）。這時候就需要Prettier上場了，一個配置文件，配合VScode，保存即格式化，你的同事都不需要知道代碼風(fēng)格是什么，，整個團(tuán)隊只要clone項目，自動保持統(tǒng)一風(fēng)格。搞定！

Prettier是什么 
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

以上是github上的官方解釋，其實就是簡單的代碼格式工具，和esLint不同在于，ESLint只是一個代碼質(zhì)量工具(確保沒有未使用的變量、沒有全局變量，等等)。而Prettier只關(guān)心格式化文件(最大長度、混合標(biāo)簽和空格、引用樣式等)?？梢?，代碼格式統(tǒng)一的問題，交給Prettirer再合適不過了。和Eslint配合使用，風(fēng)味更佳。

Prettier怎么用

編輯器插件

CLI命令行

編輯器

這里介紹VSCode中如何配置Prettier

安裝 Prettier插件 Prettier - Code formatter
安裝插件后，調(diào)出系統(tǒng)設(shè)置就能看到prettier相關(guān)選項了，如圖

添加自定義配置文件.prettierrc
作為項目的整體代碼規(guī)范，如果依賴本地配置，顯然是不科學(xué)的，所以需要.prettierrc 文件覆蓋本地配置。我的配置文件如下

   {
      "singleQuote": true,
      "trailingComma": "es5",
      "printWidth": 140,
      "overrides": [
        {
          "files": ".prettierrc",
          "options": { "parser": "json" }
        }
      ]
    }

到此，prettier安裝完畢，使用shift+alt+f就可格式化代碼。當(dāng)然每次手動格式化還是很費(fèi)力啊，怎么辦？自動保存。系統(tǒng)設(shè)置中增加"editor.formatOnSave": true即可自動保存，還要注意的一點(diǎn)是，如果同時設(shè)置了"files.autoSave": "autoSaveDelay",保存及格式化會失效。files.autoSave配置成別的選項即可。

另外，如果項目配置了.editorConfig文件，在配置了"editor.formatOnSave": true后，如果項目成員沒有安裝 Prettier 插件，保存時就會讀取.editorConfig文件，同樣可以格式化代碼。啟用 Prettier 插件后，.editorConfig的配置就會失效，讀取.prettierrc 文件的配置

命令行

命令行用法需要安裝prettier,npm install prettier --save-dev，使用prettier write **.js 就可以格式化文件。將添加到你的NPM腳本中，prettier --write "./src/**/*.js,這樣就可以批量格式化項目中的所有文件了。

結(jié)語

prettier只關(guān)心代碼格式，顯然是不夠的。項目中還是要引入ESlint。兩者配合才能使項目代碼優(yōu)雅健壯

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98125.html

相關(guān)文章

  • 用VS Code開發(fā)Vue應(yīng)用

    摘要：這是為什么呢因為我們雖然引入了，但是還沒有對做設(shè)置，我們在項目的根目錄下創(chuàng)建一個文件，然后在其中加入再次執(zhí)行，現(xiàn)在我們看到已經(jīng)能夠起作用了。摘要： 0錯誤0警告應(yīng)該是每個程序員最基本的要求。 原文：用vscode開發(fā)vue應(yīng)用 作者：張京 Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。 現(xiàn)在用VSCode開發(fā)Vue.js應(yīng)用幾乎已經(jīng)是前端的標(biāo)配了，但很多時候我們看到的代碼混亂不堪，作為一...

    zhaofeihao 評論0 收藏0

  • 在Typescript項目中，如何優(yōu)雅的使用ESLint和Prettier

    摘要：對于項目的編碼規(guī)范而言，主要有兩種選擇和。此外由于性能問題，官方?jīng)Q定全面采用，甚至把倉庫作為測試平臺，而的解析器也成為獨(dú)立項目，專注解決雙方兼容性問題。最近在我的項目的編碼規(guī)范中全量的用代替了針對其中遇到的問題做一個記錄。 ??對于Typescript項目的編碼規(guī)范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規(guī)范js代碼，通過配置解析器，也能規(guī)范TS代碼。此外由...

    chemzqm 評論0 收藏0

  • 在Typescript項目中，如何優(yōu)雅的使用ESLint和Prettier

    摘要：對于項目的編碼規(guī)范而言，主要有兩種選擇和。此外由于性能問題，官方?jīng)Q定全面采用，甚至把倉庫作為測試平臺，而的解析器也成為獨(dú)立項目，專注解決雙方兼容性問題。最近在我的項目的編碼規(guī)范中全量的用代替了針對其中遇到的問題做一個記錄。 ??對于Typescript項目的編碼規(guī)范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規(guī)范js代碼，通過配置解析器，也能規(guī)范TS代碼。此外由...

    WilsonLiu95 評論0 收藏0

  • 在Typescript項目中，如何優(yōu)雅的使用ESLint和Prettier

    摘要：對于項目的編碼規(guī)范而言，主要有兩種選擇和。此外由于性能問題，官方?jīng)Q定全面采用，甚至把倉庫作為測試平臺，而的解析器也成為獨(dú)立項目，專注解決雙方兼容性問題。最近在我的項目的編碼規(guī)范中全量的用代替了針對其中遇到的問題做一個記錄。 ??對于Typescript項目的編碼規(guī)范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規(guī)范js代碼，通過配置解析器，也能規(guī)范TS代碼。此外由...

    琛ｈ。 評論0 收藏0

  • 梳理前端開發(fā)使用eslint-prettier檢查和格式化代碼

    摘要：梳理前端開發(fā)使用檢查和格式化代碼問題痛點(diǎn)在團(tuán)隊的項目開發(fā)過程中，代碼維護(hù)所占的時間比重往往大于新功能的開發(fā)。使用格式化所有代碼。參考文檔如何花分鐘解決產(chǎn)生的各種錯誤的記憶現(xiàn)場原文轉(zhuǎn)載梳理前端開發(fā)使用檢查和格式化代碼線上猛如虎，線下慫如鼠 梳理前端開發(fā)使用eslint-prettier檢查和格式化代碼 問題痛點(diǎn) 在團(tuán)隊的項目開發(fā)過程中，代碼維護(hù)所占的時間比重往往大于新功能的開發(fā)。因此編...

    yangrd 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<