嫩草影院久久99_老司机午夜网站国内精品久久久久久久久_久久夜色精品国产_国产一级做a爰片久久毛片

使用 VSCode 開發(fā) Gatsby 項(xiàng)目配置

2020-6-3 seo達(dá)人

初始化

使用 https://github.com/XYShaoKang... 作為基礎(chǔ)模板

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

Prettier 配置

安裝 VSCode 擴(kuò)展

按 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 擴(kuò)展

按 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

使用官方倉庫的配置,之后在根據(jù)需要修改

// 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 規(guī)則沖突

推薦配置

安裝依賴

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

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

module.exports = {

extends: ['plugin:prettier/recommended'],

}

VSCode 中 Prettier 和 ESLint 協(xié)作

方式一:使用 ESLint 擴(kuò)展來格式化代碼

配置.vscode/settings.json

// .vscode/settings.json

{

"eslint.format.enable": true,

"[javascript]": {

"editor.defaultFormatter": "dbaeumer.vscode-eslint"

"[javascriptreact]": {

"editor.defaultFormatter": "dbaeumer.vscode-eslint"

}

ESLint 擴(kuò)展會(huì)默認(rèn)忽略.開頭的文件,比如.eslintrc.js

如果需要格式化.開頭的文件,可以在.eslintignore中添加一個(gè)否定忽略來啟用對(duì)應(yīng)文件的格式化功能.

!.eslintrc.js

或者直接使用!.*,這樣可以開啟所有點(diǎn)文件的格式化功能

方式二:使用 Prettier 擴(kuò)展來格式化代碼

在版prettier-vscode@v5.0.0中已經(jīng)刪除了直接對(duì)linter的集成,所以版沒法像之前那樣,通過prettier-eslint來集成ESLint的修復(fù)了(一定要這樣用的話,可以通過降級(jí)到prettier-vscode@4來使用了).如果要使用Prettier來格式化的話,就只能按照官方指南中的說的集成方法,讓Prettier來處理格式,通過配置在保存時(shí)使用ESlint自動(dòng)修復(fù)代碼.只是這樣必須要保存文件時(shí),才能觸發(fā)ESLint的修復(fù)了.

配置 VSCode 使用 Prettier 來格式化 js 和 jsx 文件

在項(xiàng)目中新建文件.vscode/settings.json

// .vscode/settings.json

{

"[javascript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

"[javascriptreact]": {

"editor.defaultFormatter": "esbenp.prettier-vscode"

"editor.codeActionsOnSave": {

"source.fixAll.eslint": true

}

說實(shí)話這個(gè)體驗(yàn)很糟糕,之前直接一鍵格式化代碼并且修復(fù) ESLint 錯(cuò)誤,可以對(duì)比格式化之前和格式化之后的代碼,如果感覺不對(duì)可以直接撤銷更改就好了.現(xiàn)在必須要通過保存,才能觸發(fā)修復(fù) ESlint 錯(cuò)誤.而在開發(fā)過程中,通過監(jiān)聽文件改變來觸發(fā)熱加載或者重新編譯是很常見的操作.這樣之后每次想要去修復(fù) ESLint 錯(cuò)誤,還是只是想看看修復(fù)錯(cuò)誤之后的樣子,都必須要去觸發(fā)熱加載或重新編譯,每次操作的成本就太高了.

我更推薦第一種方式使用 ESLint 擴(kuò)展來對(duì)代碼進(jìn)行格式化.

調(diào)試 Gatsby 配置

調(diào)試構(gòu)建過程

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

// .vscode/launch.json

{

// 使用 IntelliSense 了解相關(guān)屬性。

// 懸停以查看現(xiàn)有屬性的描述。

// 欲了解更多信息，請(qǐng)?jiān)L問: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{