Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

SETUP ESLint Prettier

$
0
0

STEP

  1. npm i
  2. init
  3. package.json

ESLintは文法のError検出や記法を統一するモジュールです。

Prettierも記法を統一するモジュールですが、ESLintよりも強制的です。

PrettierはESLintより記法が良いためPrettierを使います。

npm i

npm i -D\
eslint \
eslint-config-standard \
eslint-plugin-import \
eslint-plugin-promise \
eslint-plugin-node \
eslint-config-prettier \
prettier \
postcss-cli

規約は.eslintrc.jsonに追記します。

規約を決めるのは大変なのでeslint-config-standardのような先人が決めてくれた規約を使います。

規約は名称にeslint-config-が付与されます。

Creating a Shareable Config

Make sure the module name begins with eslint-config-, such as eslint-config-myconfig.

init

.eslintrc.jsonを作ります。

Command Line Interface --init

npx eslint --init

? How would you like to use ESLint? … 
  To check syntax only
❯ To check syntax and find problems
  To check syntax, find problems, and enforce code style

? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? … 
❯ React
  Vue.js
  None of these

? Does your project use TypeScript? › No / Yes

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)✔ Browser
✔ Node

? What format do you want your config file to be in? … 
  JavaScript
  YAML
❯ JSON

The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
? Would you like to install them now with npm? › No / Yes

Successfully created .eslintrc.json file in /Users/

.eslintrc.jsonの形式を問われるのでプロジェクトに合わせて答えましょう。

PrettierとESLintの規約が競合しないように.eslintrc.jsonのextendsにprettierが必要です。

これでESLintのPrettierと競合する規約がoffにされます。

"extends":["standard","prettier"]

次に.prettierrc.jsonを作ります。

echo{}> .prettierrc.json

.prettierrc.jsonで変更した規約以外はPrettierの規約が強制されます。

強制されれば、プログラマーが規約で悩む時間とプログラマー同士の規約に絡む厄介な打合せが減ります。

{"trailingComma":"es5","tabWidth":4,"semi":false,"singleQuote":true}

package.json

まずPrettierを走らせて、次にESLintを走らせます。

以下のようにESLintとPrettierを走らせるscriptsをpackage.jsonに追記します。

"scripts":{"test":"npm run test:prettier && npm run test:eslint","test:prettier":"prettier --write \"src/**/*.js\"","test:eslint":"eslint \"src/**/*.js\""}

後はお好みでhuskylint-stagedを使いましょう。

Error/Warning

  • Warning: Reactのバージョン指定

eslint --fix 'src/**/*'するとWarningが出ます。

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration .

内容に従い.eslintrc.jsを以下のように変更します。

Reactのバージョンを指定するプロパティですが、detectを指定すると自動検出されます。

settings:{react:{version:'detect'}}
  • Error: ecmaVersion
error  Parsing error: Invalid value for lib provided: es2021

.eslintrc.jsecmaVersionecmaVersion: 2020にします。

ESLintの公式ドキュメントは以下です。

set to 3, 5 (default), 6, 7, 8, 9, 10, 11, or 12 to specify the version of ECMAScript syntax you want to use. You can also set to 2015 (same as 6), 2016 (same as 7), 2017 (same as 8), 2018 (same as 9), 2019 (same as 10), 2020 (same as 11), or 2021 (same as 12) to use the year-based naming.

12でも良さそうですが、issueやsrcを追うのが怠いです(オイ)。

  • Error: リントの適用失敗
No files matching the pattern "src/code" were found.
Please check for typing mistakes in the pattern.

もしeslint --fix src/**/*としていればeslint --fix 'src/**/*'として下さい。

Shellを経由するため''で囲わなければ上手くESLintに渡りません。

  • Error: importしたReactが未使用
error  'React' was used before it was defined  no-use-before-define

@typescript-eslintのバージョンが新しいと発生するのでダウングレードして下さい。

@typescript-eslint/eslint-plugin@4.0.1
@typescript-eslint/parser@4.0.1

Viewing all articles
Browse latest Browse all 8691

Trending Articles