項目代碼的格式化統一配置 Prettier & ESLint

Yu_Huang 發布于2019-08-26 12:19 / 1769人閱讀

摘要：以前沒時間過，每次項目編輯器的插件就關掉，老項目都沒注意過相關的代碼規范，這次新項目加入進去實踐下三個插件功自動有些規則是沖突的，需要確定優先順序，其他插件進行自定義化的配置都可以自動保存格式化的功能用和寫出高質量代碼在中對兩者進行配置使用

以前沒時間過eslint，每次項目vscode 編輯器的eslint插件就關掉eslint，老項目都沒注意過相關的代碼規范，這次新項目加入進去實踐下！

Question

三個插件功自動有些規則是沖突的，需要確定優先順序，其他插件進行自定義化的配置

都可以自動保存格式化的功能

Reference

用 ESLint 和 Prettier 寫出高質量代碼

在package中對兩者進行配置

使用ESLint ＆ Prettier美化Vue代碼

相對官方的文檔，感覺沒講清楚

Integrating with ESLint

對優先使用了Pretiter規則還是esLint都給出了解決方案，并給出了推薦的設置

Answer 方案 1

最簡單的，Integrating with ESLint 中最后的recommend的方案：

yarn add --dev eslint-plugin-prettier eslint-config-prettier

.eslintrc.json 配置中添加

{
  "extends": ["plugin:prettier/recommended"]
}

簡單 so easy！

方案 2

npm i -D eslint-plugin-prettier

package.json中添加配置：

"eslintConfig": {
  "extends": [
    "prettier"
  ],
  "plugins": [
    "prettier"
  ]
},
"prettier": {
  "singleQuote": true,
  "semi": false
},

Different

兩者的區別在于是否使用單引號和行末尾是否有分號，第二種eslint報錯不會自動修復

Recommend integrating with editor

配置編輯器的 formatOnSave 設置，保存后自動化格式檢測，列出vscode的配置， Reference

{
  "prettier.eslintIntegration": true,
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true
}

vscode編輯器中相關的插件：

Prettier - Code formatter

EditorConfig for VS Code

ESLint

暫時沒涉及到editconfig 后面用到在添加

GPU云服務器云服務器 java配置統一管理 webrtc 互動直播連麥的項目代碼騰訊云服務器鏡像統一配置 Prettier

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108475.html

代碼風格統一：commitlint &amp; eslint &amp; standard-vers

摘要：配置添加包配置此處如果不使用需要將替換為效果代碼提交的格式不符合標準就會直接被拒絕。 Commitlint 配置添加包 yarn add @commitlint/cli @commitlint/config-conventional husky -D 配置package.json husky: { hooks: { // 此處如果不使用husky 需要將H...

lieeps 2019-08-23 13:54 評論0 收藏0
更新版-梳理前端開發使用eslint和prettier來檢查和格式化代碼問題

摘要：整個代碼檢查和格式化流程應該規范為如下步驟使用并且嘗試自動修復所有問題有提示，可以進行修復，按照配置文件來進行修復。參考文檔如何花分鐘解決產生的各種錯誤的記憶現場本文轉載自我的更新版梳理前端開發使用和來檢查和格式化代碼問題更新版，之前的版本可以看這里：梳理前端開發使用eslint和prettier來檢查和格式化代碼問題一、問題痛點在團隊的項目開發過程中，代碼維護所占的時間比重...

GitChat 2019-08-26 12:02 評論0 收藏0
梳理前端開發使用eslint-prettier檢查和格式化代碼

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

yangrd 2019-08-22 17:01 評論0 收藏0
Web 項目編碼規范化工具

摘要：項目編碼規范化工具工具代碼校驗工具，讓代碼更一致和避免。在配置文件到項可對單條規則一一進行改寫。以下以項目需校驗文件為例參考鏈接一步一步，統一項目中的編碼規范 Web 項目編碼規范化工具工具 ESLint The pluggable linting utility for JavaScript and JSX 代碼校驗工具（linting utility），讓代碼更一致和避免 bug...

meislzhua 2019-08-23 18:17 評論0 收藏0
用eslint + prettier + pre-commit管理項目(React)

摘要：前言人是很懶惰的，你剛開始建立的一個規規整整的項目，可能一段時間過后，就回被你無數次的提交代碼弄得凌亂不堪。前言人是很懶惰的，你剛開始建立的一個規規整整的項目，可能一段時間過后，就回被你無數次的提交代碼弄得凌亂不堪。就算你能保證你的編碼風格嚴謹統一，別人又該如何，每個人都有不一樣的編碼風格，要保持統一，就要對項目進行適當的管理正文接下來介紹個React項目簡單管理的一個實踐： ...

endiat 2019-08-23 10:38 評論0 收藏0