1 在VSCode中單獨使用Prettier保存代碼自動格式化的配置方法
1.1 為什么要使用Prettier？
手動調整代碼格式，不僅低效，而且在團隊協作開發中，無法保證代碼風格統一，所以需要引入自動格式化代碼工具。Prettier不僅可以格式化js, jsx, vue,angular,ts,flow，還適用於HTML, CSS/Less,/Sass，Markdown, YAML, GraphQL代碼的格式化，
1.2 Prettier代碼格式化規則有哪些？
{ printWidth: 80, // 超過最大值換行 tabWidth: 2, // 縮進字節數 useTabs: false, // 縮進不使用tab，使用空格 semi: true, // 句尾添加分號 singleQuote: false, // 使用單引號代替雙引號 quoteProps: 'as-needed', // 對象的key是否用引號括起來,有三種選項 "as-needed"|"consistent"|"preserve" jsxSingleQuote: false, // 在jsx中使用單引號代替雙引號 trailingComma: 'es5', // 選項：none|es5|all， 在對象或數組最后一個元素后面是否加逗號（在ES5中加尾逗號） bracketSpacing: true, // 是否在對象的{}內部兩側加空格 true - { foo: bar } false - {foo: bar}. jsxBracketSameLine: false, // 在jsx中把'>' 是否單獨放一行 arrowParens: 'avoid', // (x) => {} 箭頭函數參數只有一個時是否要有小括號。avoid：省略括號 'bracketSpacing': true, // 在對象，數組括號與文字之間加空格 "{ foo: bar }" rangeStart: 0, // 僅格式化選中文本 選中文本格式化的起始位置 rangeEnd: Infinity, // 選中文本格式化的結束位置 parser: 'babylon', // 格式化的解析器，默認是babylon,會自動根據輸入文件推斷，不用更改設置 requirePragma: false, // 若為true，文件頂部加了 /*** @prettier */或/*** @format */的文件才會被格式化 insertPragma: false, // 當requirePragma參數為true時,此參數為true將向@format標記后面添加一個換行符 proseWrap: 'preserve', // 有效選項[always|never|preserve]。當Markdown文本超過printWidth時,是否換行,always-換行 never-不換行 preserve保持原樣 endOfLine: 'lf', // 結尾是 lf-\n cr-\r lfcr-\n\r auto-保持現有的行尾設置 htmlWhitespaceSensitivity: 'css', // 是否顯示HTML文件中的空格。 有效選項： 'css' - 尊重CSS display屬性的設置。 'strict' - 空格被認為是敏感的。 'ignore' - 空格被認為是不敏感的 vueIndentScriptAndStyle: false, // 是否給vue中的 <script> and <style>標簽加縮進 embeddedLanguageFormatting: 'auto', // 是否格式化嵌入到JS中的html標記的代碼段或者Markdown語法 auto-格式化 off-不格式化 }
1.3 如何開啟保存時代碼自動格式化？
1.3.1 下載Prettier插件
在vscode的配置文件中,設置保存代碼時使用prettier自動進行代碼格式化
{ "javascript.format.enable": false, // 禁用vscode默認的js格式化插件 "editor.formatOnSave": true, // 保存代碼的時候格式化 "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" // js文件采用prettier進行格式化 }, }
配置完之后，保存代碼時，就有自動格式化的效果。
2.ESLint代碼校驗配置
2.1 有了Prettier之后，為什么還需要ESLint？
prettier只關心代碼格式，這顯然是不夠的，我們追求的目標不僅僅是代碼風格統一，還要在書寫的時候，避免一些常見的低級的錯誤。所以，就要引入ESlint。ESLint也有許多與代碼規則有關的配置項，那你可能要問，我只用eslint就好了，既能規范編碼風格，也能提升代碼質量。何必兩個都用，用了還容易起沖突，這是因為eslint的代碼格式化有盲區，只針對js,jsx,ts,tsx，不能格式化HTML, CSS/Less,/Sass，Markdown, YAML, GraphQL，以及vue中的html和css。
2.2 Prettier和ESLint為什么會沖突?
Prettier的功能比較專一，是專門用來格式化代碼的，格式化代碼的范圍比ESLint廣泛。
ESLint的功能相對綜合，大體可以分為類，一類是規范代碼風格：
一類是規范代碼質量：
它們之所以會沖突，就是因為井水犯了河水，功能有交叉，而且規則不同，比如Prettier格式化代碼，默認每行后面加分號，而ESLint的規則是不加，再比如Prettier格式化代碼時，字符串會用雙引號包起來，而ESLint的規則是單引號，由此就產生的沖突。
2.3 如何解決兩者的沖突?
要么修改Prettier的規則，使之與ESLint保持一致，要么修改ESLint的校驗規則，使之與Prettier的代碼格式化風格一致，究竟要改哪一個，都可以。個人傾向於改ESlint的規則，因為Prettier的代碼格式化規則是普適的，而ESLint的代碼校驗規則是針對特定語言的，特定的遵從普適的原則上好一些。
ESLint有關代碼風格的設置，有些是和Prettier沖突的，安裝eslint-config-prettier npm工具包，就可以關閉eslint代碼風格部分與prettier沖突的設置。
yarn add -D eslint-config-prettier
在.eslintrc.js中添加
{ "extends": [ "some-other-config-you-use", "prettier" ] }
2.3 vscode 保存時自動修復eslint報錯的配置
2.3.1 安裝ESLint插件
2.3.2 在.vscode中setting.json中開啟代碼保存自動修復eslint告警功能
"editor.codeActionsOnSave": { "source.fixAll.eslint": true },
2.3.3 安裝 eslint npm包
VSCode ESLint擴展會先從工作目錄下的node_modules中查找eslint工具包，如果找不到，會全局查找，所以有多個項目的話，建議全局安裝，這樣只需安裝一次eslint工具包
# 命令行使用時全局安裝
npm install -g eslint
其它需要安裝的npm包參見package.json文件
{ "name": "eslint-demo", "version": "1.0.0", "description": "", "private": true, "scripts": {}, "author": "tank", "devDependencies": { "@babel/core": "^7.5.5", "@babel/plugin-proposal-class-properties": "^7.5.5", "@babel/plugin-proposal-decorators": "^7.7.0", "@babel/polyfill": "^7.8.7", "@babel/preset-env": "^7.5.5", "@babel/preset-react": "^7.0.0", "babel-eslint": "^10.1.0", "babel-loader": "^8.0.6", "babel-plugin-import": "^1.12.0", "eslint": "^7.12.0", "eslint-config-airbnb": "^18.0.1", "eslint-config-prettier": "^4.1.0", "eslint-config-standard": "^14.1.0", "eslint-loader": "^4.0.2", "eslint-plugin-babel": "^5.3.0", "eslint-plugin-compat": "^2.6.3", "eslint-plugin-import": "^2.20.1", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-markdown": "^1.0.0", "eslint-plugin-node": "^11.0.0", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-react": "^7.19.0", "eslint-plugin-standard": "^4.0.1" }, "dependencies": {} }
2.3.4 在項目下添加.eslintrc.js文件,內容如下：
#生成eslint配置文件
eslint --init
module.exports = {
root:true, parser: 'babel-eslint', parserOptions: { // 想使用的額外的語言特性 ecmaFeatures: { legacyDecorators: true, // 裝飾器 }, }, // 添加共享設置, 在共享設置中設置的對象能被任一即將執行的規則獲取到，所以這在開發自定義規則插件而言很重要 settings: { polyfills: ['fetch', 'promises', 'url', 'object-assign'], }, // extends 屬性值可以省略包名的前綴 eslint-config- // 你可能想要將你的配置信息分享給其他項目或人。可分享的配置允許你在 npm 發布你的配置設置並且其他人可以在他的 ESLint 項目中下載使用這些配置。 // 可共享的配置 是一個 npm 包，它輸出一個配置對象。 extends: ['airbnb','prettier', 'plugin:compat/recommended'], // 插件一般是輸出規則,一些插件也可以輸出一個或多個命名的 配置 plugins: ['react'], // 指定腳本的運行環境。每種環境都有一組特定的預定義全局變量。 env: { browser: true, node: true, es6: true, mocha: true, jest: true, jasmine: true, }, globals: { localStorage: true, sessionStorage: true, WeixinJSBridge: true, screen: true, wx: true, qq: true, alert: true, Image: true, File: true, FormData: true, IntersectionObserver: true, fiboSDK: true, }, rules: { // 規則集，會覆蓋extends中的規則，多用於關閉不符合項目使用場景的規則// 不檢驗函數入參是否被使用 'no-unused-vars': ['warn', { args: 'none' }], }, };
2.3.5 如果想在代碼編譯的時候，提示eslint錯誤，你需要在webpack.config.js中添加
module: { rules: [{ test: /\.(js|jsx)$/, exclude: [/node_modules/], use: { loader: 'babel-loader', options: { sourceMap: true, plugins: [ "add-module-exports", ['import', { libraryName: "antd", style: 'css' }] ] } } }, { test: /\.(js|jsx)$/, use: ['eslint-loader'], exclude: [/node_modules/], enforce: 'pre' }] }
2.3.6 最終的提示效果，有些代碼風格類的問題(比如參數之間是否加空格), eslint可以修復，有些則不能(如for循環循環方向必須是自增)，而所有的代碼質量類問題(如變量定義了未使用)
，都需要手動修復。
3. 避坑指南
1.安裝了VSCode ESlint擴展，在.vscode的setting.json中配置了ESLint保存自動修復，也安裝了ESLint相關node_modules依賴，也配置了.eslintrc.js和.eslintignore，但保存代碼時ESLint沒有錯誤提示，也沒有自動修復錯誤，打開VSCode 命令窗口的輸出面板一看，原來是
.eslintrc校驗規則集Airbnb有一個規則不被支持，"ignoreDOMComponents" 選項在 eslint-plugin-react v7.11.0+以上才被支持，而我安裝的 eslint-plugin-react 版本是v7.5.0
如果你發現按照本文的步驟，編寫違反eslint校驗規則的代碼時沒有eslint提示，那你首先要看看控制台有沒有報錯。
2.prettier 格式化報錯 'No files matching the pattern were found' when using prettier
參考文獻