React項目工程化（二）集成Prettier實現(xiàn)代碼格式化

這部分主要是基于eslint引入后，集成Prettier，達到可以使用eslint的同時，通過Prettier自動格式化代碼。

Step 1、依賴安裝

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

Step 2、修改.eslintrc.js文件

module.exports = {
  ...
  extends: ["plugin:react/recommended", "prettier"], // 加了prettier
  ...
}

Step 3、添加.prettierrc.js文件

// 根目錄下，內容可配置，詳細看官方文檔 https://prettier.io/docs/en/options.html
module.exports = {
    printWidth: 80, //一行的字符數(shù)，如果超過會進行換行，默認為80
    tabWidth: 2, //一個tab代表幾個空格數(shù)，默認為2
    semi: true, // 是否有冒號結尾，是
    singleQuote: false, // 是否單引號，是
    trailingComma: "none", 
}

Step 3、編輯器安裝插件

image.png

在此，只要使用編輯器自帶的格式化工具，比如右鍵 - 格式化文本，或者設置了編輯器auto format on save，就會按照要求自動格式化了

PS:
建議同級添加ignore文件.prettierignore，內容如下：

**/node_modules/*
build
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容