#手順
-
npx create-next-app -e with-tailwindcss --ts
-
src
というディレクトリーをルートに作り、pages
をその中に入れる。 -
ここから下はここにあることをやっている→ https://paulintrognon.fr/blog/typescript-prettier-eslint-next-js ここにあるlinterの設定の仕方の手順を行う
-
npm add --include=dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y
でes lintをインストール -
.eslintrc.js
ファイルを作り下記を入れる
module.exports = {
root: true,
env: {
node: true,
es6: true,
},
parserOptions: { ecmaVersion: 8 }, // to enable features such as async/await
ignorePatterns: ['node_modules/*', '.next/*', '.out/*', '!.prettierrc.js'], // We don't want to lint generated files nor node_modules, but we want to lint .prettierrc.js (ignored by default by eslint)
extends: ['eslint:recommended'],
overrides: [
// This configuration will apply only to TypeScript files
{
files: ['**/*.ts', '**/*.tsx'],
parser: '@typescript-eslint/parser',
settings: { react: { version: 'detect' } },
env: {
browser: true,
node: true,
es6: true,
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended', // TypeScript rules
'plugin:react/recommended', // React rules
'plugin:react-hooks/recommended', // React hooks rules
'plugin:jsx-a11y/recommended', // Accessibility rules
'prettier', // Prettier plugin
'plugin:prettier/recommended', // Prettier recommended rules
],
rules: {
// We will use TypeScript's types for component props instead
'react/prop-types': 'off',
// No need to import React when using Next.js
'react/react-in-jsx-scope': 'off',
// This rule is not compatible with Next.js's <Link /> components
'jsx-a11y/anchor-is-valid': 'off',
// Why would you want unused vars?
'@typescript-eslint/no-unused-vars': ['error'],
// I suggest this setting for requiring return types on functions only where useful
'@typescript-eslint/explicit-function-return-type': [
'warn',
{
allowExpressions: true,
allowConciseArrowFunctionExpressionsStartingWithVoid: true,
},
],
'prettier/prettier': ['error', {}, { usePrettierrc: true }], // Includes .prettierrc.js rules
},
},
],
}
-
npm add --dev prettier eslint-plugin-prettier eslint-config-prettier
でprettierをインストール -
.prettierrc.js
を作り下記を入れる
module.exports = {
// Change your rules accordingly to your coding style preferences.
// https://prettier.io/docs/en/options.html
semi: false,
trailingComma: 'es5',
singleQuote: true,
printWidth: 100,
tabWidth: 2,
useTabs: false,
}
- VS Codeのsettings.jsonにこれを追加(なければ)
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
- package.jsonのscriptにこれらを追加
"lint": "tsc --project ./ --pretty --noEmit && eslint . --ext js,jsx,ts,tsx --fix"
-
npm add --D husky@4.3.8 lint-staged
でhuskyとlint-stagedをインストール - package.jsonにこれを追加
"lint-staged": {
"**/*.{ts,tsx}": "npm run lint"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}