發表文章

Prettier 學習筆記

圖片
Prettier 特點 一鍵改變代碼風格,無須改變開發風格 => 1. 安裝Node 環境 自行安裝 => 2. 安裝 Prettier 全局安裝 np​​m install --global prettier 局部安裝 np​​m install --save-dev --save-exact prettier => 3. 添加.prettierrc 配置文件(項目根目錄) 創建文件(可以自定義其他名稱) touch .prettierrc => 4. 修改.prettierrc 配置文件 prettierrc 配置文件支持三種格式 JSON: {        "printWidth" : 100 ,        "parser" : "flow"     } JS: // .prettierrc.js      module .exports = {        printWidth : 100 ,        parser : "flow"     } YAML: { "printWidth": 100 , "parser": "flow"      } ==> 5. 自定義配置 官網Options 部分配置 .prettierrc // js 格式 -- 方便備註     export .modules = {        "semi" : false , // 句末加分號        "singleQuote" : true , // 用單...

[JS] 使用 ESLint 提高程式碼品質

圖片
ESLint ESLint 是眾多 Javascript Linter 中的其中一個,其他比較常見的還有  JSLint 跟  JSHint (名字都好像 XDD),之所以會推薦 ESLint 是因為他可以自由選擇要使用哪些規則,也有很多現成的 plugin 可以使用,另外他對 ES6 還有 JSX 的支援度跟其他 linter 相較之下也是最高的 如何在現有的專案中導入 ESLint 如果你手邊已經有一個專案,那就先全域安裝 ESLint npm install eslint -g 初始化 ESLint 在專案目錄下跑  eslint --init ,這邊你可以選擇直接使用比較熱門的 style guide 或是自訂規則 目前比較熱門的 style guide 有  Google 、 Airbnb  跟  Standard  三個,使用 style guide 的好處就是不用自己設定規則,但彈性稍低 初始化完畢後目錄下會多一個  .eslintrc.js ,裡面就是 ESLint 的設定,以我剛剛自訂的規則來說好了 // .eslintrc.js module.exports = { "env": { "browser": true, "commonjs": true, "es6": true, "node": true }, "extends": "eslint:recommended", "parserOptions": { "ecmaFeatures": { "experimentalObjectRestSpread": true, "jsx": true }, "sourceType": "module" }, "plugins":...