初始化

使用 https://github.com/XYShaoKang... 作為基礎(chǔ)模板

gatsby new gatsby-project-config https://github.com/XYShaoKang/gatsby-hello-world

Prettier 配置

安裝 VSCode 擴(kuò)展

按 Ctrl + P (MAC 下: Cmd + P) 輸入以下命令,按回車(chē)安裝

ext install esbenp.prettier-vscode

安裝依賴(lài)

yarn add -D prettier

Prettier 配置文件.prettierrc.js

// .prettierrc.js

module.exports = {

 trailingComma: 'es5',

 tabWidth: 2,

 semi: false,

 singleQuote: true,

 endOfLine: 'lf',

 printWidth: 50,

 arrowParens: 'avoid',

}

ESLint 配置

安裝 VSCode 擴(kuò)展

按 Ctrl + P (MAC 下: Cmd + P) 輸入以下命令,按回車(chē)安裝

ext install dbaeumer.vscode-eslint

安裝 ESLint 依賴(lài)

yarn add -D eslint babel-eslint eslint-config-google eslint-plugin-react eslint-plugin-filenames

ESLint 配置文件.eslintrc.js

使用官方倉(cāng)庫(kù)的配置,之后在根據(jù)需要修改

// https://github.com/gatsbyjs/gatsby/blob/master/.eslintrc.js

// .eslintrc.js

module.exports = {

 parser: 'babel-eslint',

 extends: [

   'google',

   'eslint:recommended',

   'plugin:react/recommended',

 ],

 plugins: ['react', 'filenames'],

 parserOptions: {

   ecmaVersion: 2016,

   sourceType: 'module',

   ecmaFeatures: {

     jsx: true,

   },

 },

 env: {

   browser: true,

   es6: true,

   node: true,

   jest: true,

 },

 globals: {

   before: true,

   after: true,

   spyOn: true,

   __PATH_PREFIX__: true,

   __BASE_PATH__: true,

   __ASSET_PREFIX__: true,

 },

 rules: {

   'arrow-body-style': [

     'error',

     'as-needed',

     { requireReturnForObjectLiteral: true },

   ],

   'no-unused-expressions': [

     'error',

     {

       allowTaggedTemplates: true,

     },

   ],

   'consistent-return': ['error'],

   'filenames/match-regex': [

     'error',

     '^[a-z-\\d\\.]+$',

     true,

   ],

   'no-console': 'off',

   'no-inner-declarations': 'off',

   quotes: ['error', 'backtick'],

   'react/display-name': 'off',

   'react/jsx-key': 'warn',

   'react/no-unescaped-entities': 'off',

   'react/prop-types': 'off',

   'require-jsdoc': 'off',

   'valid-jsdoc': 'off',

 },

 settings: {

   react: {

     version: '16.4.2',

   },

 },

}

解決 Prettier ESLint 規(guī)則沖突

推薦配置

安裝依賴(lài)

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

在.eslintrc.js中的extends添加'plugin:prettier/recommended'

module.exports = {

 extends: ['plugin:prettier/recommended'],

}

VSCode 中 Prettier 和 ESLint 協(xié)作

方式一:使用 ESLint 擴(kuò)展來(lái)格式化代碼

配置.vscode/settings.json

// .vscode/settings.json

{

 "eslint.format.enable": true,

 "[javascript]": {

   "editor.defaultFormatter": "dbaeumer.vscode-eslint"

 },

 "[javascriptreact]": {

   "editor.defaultFormatter": "dbaeumer.vscode-eslint"

 }

}

ESLint 擴(kuò)展會(huì)默認(rèn)忽略.開(kāi)頭的文件,比如.eslintrc.js

如果需要格式化.開(kāi)頭的文件,可以在.eslintignore中添加一個(gè)否定忽略來(lái)啟用對(duì)應(yīng)文件的格式化功能.

!.eslintrc.js

或者直接使用!.*,這樣可以開(kāi)啟所有點(diǎn)文件的格式化功能

方式二:使用 Prettier 擴(kuò)展來(lái)格式化代碼

在版prettier-vscode@v5.0.0中已經(jīng)刪除了直接對(duì)linter的集成,所以版沒(méi)法像之前那樣,通過(guò)prettier-eslint來(lái)集成ESLint的修復(fù)了(一定要這樣用的話,可以通過(guò)降級(jí)到prettier-vscode@4來(lái)使用了).如果要使用Prettier來(lái)格式化的話,就只能按照官方指南中的說(shuō)的集成方法,讓Prettier來(lái)處理格式,通過(guò)配置在保存時(shí)使用ESlint自動(dòng)修復(fù)代碼.只是這樣必須要保存文件時(shí),才能觸發(fā)ESLint的修復(fù)了.

配置 VSCode 使用 Prettier 來(lái)格式化 js 和 jsx 文件

在項(xiàng)目中新建文件.vscode/settings.json

// .vscode/settings.json

{

 "[javascript]": {

   "editor.defaultFormatter": "esbenp.prettier-vscode"

 },

 "[javascriptreact]": {

   "editor.defaultFormatter": "esbenp.prettier-vscode"

 },

 "editor.codeActionsOnSave": {

   "source.fixAll.eslint": true

 }

}

說(shuō)實(shí)話這個(gè)體驗(yàn)很糟糕,之前直接一鍵格式化代碼并且修復(fù) ESLint 錯(cuò)誤,可以對(duì)比格式化之前和格式化之后的代碼,如果感覺(jué)不對(duì)可以直接撤銷(xiāo)更改就好了.現(xiàn)在必須要通過(guò)保存,才能觸發(fā)修復(fù) ESlint 錯(cuò)誤.而在開(kāi)發(fā)過(guò)程中,通過(guò)監(jiān)聽(tīng)文件改變來(lái)觸發(fā)熱加載或者重新編譯是很常見(jiàn)的操作.這樣之后每次想要去修復(fù) ESLint 錯(cuò)誤,還是只是想看看修復(fù)錯(cuò)誤之后的樣子,都必須要去觸發(fā)熱加載或重新編譯,每次操作的成本就太高了.

我更推薦第一種方式使用 ESLint 擴(kuò)展來(lái)對(duì)代碼進(jìn)行格式化.

調(diào)試 Gatsby 配置

調(diào)試構(gòu)建過(guò)程

添加配置文件.vscode/launch.json

// .vscode/launch.json

{

 // 使用 IntelliSense 了解相關(guān)屬性。

 // 懸停以查看現(xiàn)有屬性的描述。

 // 欲了解更多信息，請(qǐng)?jiān)L問(wèn): https://go.microsoft.com/fwlink/?linkid=830387

 "version": "0.2.0",

 "configurations": [

   {

     "name": "Gatsby develop",

     "type": "node",

     "request": "launch",

     "protocol": "inspector",

     "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby",

     "args": ["develop"],

     "stopOnEntry": false,

     "runtimeArgs": ["--nolazy"],

     "sourceMaps": false,

     "outputCapture": "std"

   }

 ]

}

的gatsby@2.22.*版本中調(diào)試不能進(jìn)到斷點(diǎn),解決辦法是降級(jí)到2.21.*,yarn add gatsby@2.21.40,等待官方修復(fù)再使用版本的

調(diào)試客戶(hù)端

需要安裝 Debugger for Chrome 擴(kuò)展

ext install msjsdiag.debugger-for-chrome

添加配置文件.vscode/launch.json

// .vscode/launch.json

{

 // 使用 IntelliSense 了解相關(guān)屬性。

 // 懸停以查看現(xiàn)有屬性的描述。

 // 欲了解更多信息，請(qǐng)?jiān)L問(wèn): https://go.microsoft.com/fwlink/?linkid=830387

 "version": "0.2.0",

 "configurations": [

   {

     "type": "chrome",

     "request": "launch",

     "name": "Gatsby Client Debug",

     "url": "http://localhost:8000",

     "webRoot": "${workspaceFolder}"

   }

 ]

}

先啟動(dòng) Gatsby,yarn develop,然后按 F5 開(kāi)始調(diào)試.