Next.jsにほぼESLintだけ入れる

ツイート
2021年06月07日
2021年06月07日

最低限、セミコロンやクウォートなどを整理したいケースが多いのでメモ。

インストール

bash
yarn add -D eslint eslint-plugin-react

設定

.eslintrc.jsを作成

js
module.exports = { root: true, env: { node: true, es6: true, }, parserOptions: { // Parsing error: 'import' and 'export' may appear only with 'sourceType: module' 対策 sourceType: 'module', // eslint Parsing error: Unexpected token function with async 対策 ecmaVersion: 8 }, plugins: [ 'react' ], ignorePatterns: [ 'node_modules/*', '.next/*', 'out/*', ], extends: [ 'eslint:recommended', 'plugin:react/recommended' ], // https://eslint.org/docs/rules/ を参照 rules: { 'semi': ['error', 'never'], 'react/react-in-jsx-scope': 'off', // めっちゃエラー出るので 'react/prop-types': 'off' // めっちゃエラー出るので } }

実行

package.json

json
"scripts": { "lint": "eslint --ext js,jsx --fix ." }

実行

bash
yarn lint

VSCode設定

json
// .vscode/settings.json { "editor.formatOnSave": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }