📅 Write: 2020/02/03
✅ Before you follow this tutorial, create the Next.js project first.
Check Next.js TypeScript Document
yarn add -D eslint eslint-config-prettier eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier
module.exports = {
parser: "@typescript-eslint/parser",
extends: [
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"react-app",
"plugin:prettier/recommended"
],
plugins: ["@typescript-eslint", "react"],
rules: {}
};
💡 If you have a Prettier setting that you used, you will be familiar with using that setting.
{
"printWidth": 100,
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"semi": false,
"useTabs": false,
"arrowParens": "avoid",
"endOfLine": "auto"
}
"scripts": {
...
"lint": "eslint --ext .js,.ts,.jsx,.tsx --ignore-path .gitignore ."
},
💡 This paragraph is a setting method for Visual Studio Code.
⬆️ Install
ESLint
extension
⬆️ Install
Prettier
extension
⬆️ Search format
- ✅ Turn on
Format On Save
- 🔄 Set
Default Formatter
toesbenp.prettier-vscode
This is an added setting in my environment because of a problem with vscode. If it works, you can delete it.