使用 VSCode 开发 Gatsby 项目配置

本文主要是介绍使用 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 开始调试.

这篇关于使用 VSCode 开发 Gatsby 项目配置的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！