示例仓库 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.jsmodule.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.jsmodule.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 开始调试.