Next.js, Javascript and ESLint configuration.
Muhammad Zourdy /
Install ESLint
npm i eslint prettier eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier eslint-plugin-jsx-a11y eslint-plugin-simple-import-sort
// eslintrc.js
module.exports = {
root: true, //
parserOptions: {
ecmaVersion: 2020,
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
settings: {
react: {
version: "detect",
},
},
env: {
browser: true,
amd: true,
node: true,
},
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended",
"plugin:prettier/recommended",
],
plugins: ["simple-import-sort"],
rules: {
"prettier/prettier": ["error", {}, { usePrettierrc: true }],
"react/react-in-jsx-scope": "off",
"react/prop-types": "off",
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error",
"jsx-a11y/anchor-is-valid": [
"error",
{
components: ["Link"],
specialLink: ["hrefLeft", "hrefRight"],
aspects: ["invalidHref", "preferButton"],
},
],
},
};
// .prettierrc
{
"semi": true,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": false,
"trailingComma": "all",
"jsxBracketSameLine": true,
"endOfLine": "auto"
}
// package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint --fix .",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
},