使用 VSCode 開發 Gatsby 項目配置

示例倉庫 https://github.com/XYShaoKang...

初始化

使用 https://github.com/XYShaoKang... 做爲基礎模板

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

Prettier 配置

安裝 VSCode 擴展

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

ext install esbenp.prettier-vscode

安裝依賴

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 擴展

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

ext install dbaeumer.vscode-eslint

安裝 ESLint 依賴

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

ESLint 配置文件.eslintrc.js

使用官方倉庫的配置,以後在根據須要修改

// 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 規則衝突

推薦配置

安裝依賴

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

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

module.exports = {
  extends: ['plugin:prettier/recommended'],
}

VSCode 中 Prettier 和 ESLint 協做

方式一:使用 Prettier 擴展來格式化代碼

須要安裝依賴

yarn add -D prettier-eslint@10.1.0

Prettier 擴展會使用 prettier-eslint調用 eslint --fix來修復代碼

prettier-eslint@10.1.1中移除了core-js的依賴,可是在生產代碼中仍是會導入core-js,會致使一個導入錯誤,因此先使用10.1.0,等以後修復再使用最新版本

配置 VSCode 使用 Prettier 來格式化 js 和 jsx 文件
在項目中新建文件.vscode/settings.json

// .vscode/settings.json
{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

官方說明在未來版本中,再也不支持 prettier-eslint,因此有可能 prettier-vscode以後某次更新,就不能用了

方式二:使用 ESLint 擴展來格式化代碼

配置.vscode/settings.json

// .vscode/settings.json
{
  "eslint.format.enable": true,
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

ESLint 擴展會默認忽略.開頭的文件,好比.eslintrc.js
若是須要格式化.開頭的文件,能夠在.eslintignore中添加一個否認忽略來啓用對應文件的格式化功能.

!.eslintrc.js

或者直接使用!.*,這樣能夠開啓全部點文件的格式化功能

調試 Gatsby 配置

調試構建過程

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

// .vscode/launch.json
{
  // 使用 IntelliSense 瞭解相關屬性。
  // 懸停以查看現有屬性的描述。
  // 欲瞭解更多信息，請訪問: 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.*版本中 調試不能進到斷點,解決辦法是降級到 2.21.*, yarn add gatsby@2.21.40,等待官方修復再使用最新版本的

調試客戶端

須要安裝 Debugger for Chrome 擴展

ext install msjsdiag.debugger-for-chrome

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

// .vscode/launch.json
{
  // 使用 IntelliSense 瞭解相關屬性。
  // 懸停以查看現有屬性的描述。
  // 欲瞭解更多信息，請訪問: 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}"
    }
  ]
}

先啓動 Gatsby,yarn develop,而後按 F5 開始調試.