使用 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 协作

方式一:使用 ESLint 扩展来格式化代码

配置.vscode/settings.json

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

eslint@7 修改了默认的忽略模式,默认会包含.eslintrc.*,所以如果使用 eslint@7 时不需要以下配置

ESLint 扩展会默认忽略.开头的文件,比如.eslintrc.js
如果需要格式化.开头的文件,可以在.eslintignore中添加一个否定忽略来启用对应文件的格式化功能.

!.eslintrc.js

或者直接使用!.*,这样可以开启所有点文件的格式化功能

方式二:使用 Prettier 扩展来格式化代码

在最新版prettier-vscode@v5.0.0中已经删除了直接对linter的集成,所以最新版没法像之前那样,通过prettier-eslint来集成ESLint的修复了(一定要这样用的话,可以通过降级到prettier-vscode@4来使用了).如果要使用Prettier来格式化的话,就只能按照官方指南中的说的集成方法,让Prettier来处理格式,通过配置在保存时使用ESlint自动修复代码.只是这样必须要保存文件时,才能触发ESLint的修复了.

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

// .vscode/settings.json
{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

说实话这个体验很糟糕,之前直接一键格式化代码并且修复 ESLint 错误,可以对比格式化之前和格式化之后的代码,如果感觉不对可以直接撤销更改就好了.现在必须要通过保存,才能触发修复 ESlint 错误.而在开发过程中,通过监听文件改变来触发热加载或者重新编译是很常见的操作.这样之后每次想要去修复 ESLint 错误,还是只是想看看修复错误之后的样子,都必须要去触发热加载或重新编译,每次操作的成本就太高了.

我更推荐第一种方式使用 ESLint 扩展来对代码进行格式化.

调试 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 开始调试.