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

資訊專(zhuān)欄INFORMATION COLUMN

項(xiàng)目代碼的格式化統(tǒng)一配置 Prettier & ESLint

Yu_Huang / 1776人閱讀

摘要：以前沒(méi)時(shí)間過(guò)，每次項(xiàng)目編輯器的插件就關(guān)掉，老項(xiàng)目都沒(méi)注意過(guò)相關(guān)的代碼規(guī)范，這次新項(xiàng)目加入進(jìn)去實(shí)踐下三個(gè)插件功自動(dòng)有些規(guī)則是沖突的，需要確定優(yōu)先順序，其他插件進(jìn)行自定義化的配置都可以自動(dòng)保存格式化的功能用和寫(xiě)出高質(zhì)量代碼在中對(duì)兩者進(jìn)行配置使用

以前沒(méi)時(shí)間過(guò)eslint，每次項(xiàng)目vscode 編輯器的eslint插件就關(guān)掉eslint，老項(xiàng)目都沒(méi)注意過(guò)相關(guān)的代碼規(guī)范，這次新項(xiàng)目加入進(jìn)去實(shí)踐下！

Question

三個(gè)插件功自動(dòng)有些規(guī)則是沖突的，需要確定優(yōu)先順序，其他插件進(jìn)行自定義化的配置

都可以自動(dòng)保存格式化的功能

Reference

用 ESLint 和 Prettier 寫(xiě)出高質(zhì)量代碼

在package中對(duì)兩者進(jìn)行配置

使用ESLint ＆ Prettier美化Vue代碼

相對(duì)官方的文檔，感覺(jué)沒(méi)講清楚

Integrating with ESLint

對(duì)優(yōu)先使用了Pretiter規(guī)則還是esLint都給出了解決方案，并給出了推薦的設(shè)置

Answer 方案 1

最簡(jiǎn)單的，Integrating with ESLint 中 最后的recommend的方案：

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

.eslintrc.json 配置中添加

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

簡(jiǎn)單 so easy！

?

方案 2

npm i -D eslint-plugin-prettier

package.json中添加配置：

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

Different

兩者的區(qū)別在于是否使用單引號(hào)和行末尾是否有分號(hào)，第二種eslint報(bào)錯(cuò)不會(huì)自動(dòng)修復(fù)

Recommend integrating with editor

配置編輯器的 formatOnSave 設(shè)置，保存后自動(dòng)化格式檢測(cè)，列出vscode的配置， Reference

{
  "prettier.eslintIntegration": true,
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": true
}
vscode編輯器中相關(guān)的插件：

Prettier - Code formatter

EditorConfig for VS Code

ESLint

暫時(shí)沒(méi)涉及到editconfig 后面用到在添加

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

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

相關(guān)文章

  • 代碼風(fēng)格統(tǒng)一：commitlint & eslint & standard-vers

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

    lieeps 評(píng)論0 收藏0

  • 更新版-梳理前端開(kāi)發(fā)使用eslint和prettier來(lái)檢查和格式化代碼問(wèn)題

    摘要：整個(gè)代碼檢查和格式化流程應(yīng)該規(guī)范為如下步驟使用并且嘗試自動(dòng)修復(fù)所有問(wèn)題有提示，可以進(jìn)行修復(fù)，按照配置文件來(lái)進(jìn)行修復(fù)。參考文檔如何花分鐘解決產(chǎn)生的各種錯(cuò)誤的記憶現(xiàn)場(chǎng)本文轉(zhuǎn)載自我的更新版梳理前端開(kāi)發(fā)使用和來(lái)檢查和格式化代碼問(wèn)題 更新版，之前的版本可以看這里：梳理前端開(kāi)發(fā)使用eslint和prettier來(lái)檢查和格式化代碼問(wèn)題 一、問(wèn)題痛點(diǎn) 在團(tuán)隊(duì)的項(xiàng)目開(kāi)發(fā)過(guò)程中，代碼維護(hù)所占的時(shí)間比重...

    GitChat 評(píng)論0 收藏0

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

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

    yangrd 評(píng)論0 收藏0

  • Web 項(xiàng)目編碼規(guī)范化工具

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

    meislzhua 評(píng)論0 收藏0

  • 用eslint + prettier + pre-commit管理項(xiàng)目(React)

    摘要：前言人是很懶惰的，你剛開(kāi)始建立的一個(gè)規(guī)規(guī)整整的項(xiàng)目，可能一段時(shí)間過(guò)后，就回被你無(wú)數(shù)次的提交代碼弄得凌亂不堪。 前言 人是很懶惰的，你剛開(kāi)始建立的一個(gè)規(guī)規(guī)整整的項(xiàng)目，可能一段時(shí)間過(guò)后，就回被你無(wú)數(shù)次的提交代碼弄得凌亂不堪。就算你能保證你的編碼風(fēng)格嚴(yán)謹(jǐn)統(tǒng)一，別人又該如何，每個(gè)人都有不一樣的編碼風(fēng)格，要保持統(tǒng)一，就要對(duì)項(xiàng)目進(jìn)行適當(dāng)?shù)墓芾?正文 接下來(lái)介紹個(gè)React項(xiàng)目簡(jiǎn)單管理的一個(gè)實(shí)踐： ...

    endiat 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<