使用-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
{"": {"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,
  "": {"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 开始调试.