eslint config for nextjs (#1322)

aymanesarrar · mfix22 · web-flow · commit 0e95506d3588 · 2022-01-29T11:43:01.000-08:00
* eslint config for nextjs

* removed plugins, settings, parser from the config

* changed the script to next lint and installed the eslint next config package

* lint fixes

* move to dev dependencies

* remove unnecessary rules

* remove unnecessary babel deps

* lint on root dir

Co-authored-by: Mike Fix &lt;mrfix84@gmail.com&gt;
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,23 +1,9 @@
 module.exports = {
-  parser: '@babel/eslint-parser',
-  parserOptions: {
-    requireConfigFile: false,
-    babelOptions: {
-      presets: ['next/babel'],
-    },
-  },
-  env: {
-    browser: true,
-    es6: true,
-    node: true,
-    jest: true,
-  },
-  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:jsx-a11y/recommended'],
-  plugins: ['import', 'react', 'jsx-a11y', 'react-hooks'],
+  env: { es6: true, jest: true },
+  extends: ['eslint:recommended', 'plugin:jsx-a11y/recommended', 'next'],
   rules: {
     'import/no-unresolved': 'error',
     'no-duplicate-imports': 'error',
-    'react/prop-types': 'off',
     'react/display-name': 'off',
     'react/jsx-no-target-blank': 'error',
     'react/jsx-uses-react': 'error',
@@ -26,10 +12,9 @@ module.exports = {
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'error',
     'no-console': ['error', { allow: ['error'] }],
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
+    // TODO re-enable these
+    '@next/next/no-img-element': 'off',
+    '@next/next/no-html-link-for-pages': 'off',
+    '@next/next/link-passhref': 'off',
   },
 }
diff --git a/lib/api.js b/lib/api.js
@@ -164,7 +164,7 @@ const createSnippet = debounce(data => updateSnippet(null, data), ms('5s'), {
   trailing: false,
 })
 
-export default {
+const api = {
   snippet: {
     get: getSnippet,
     list: listSnippets,
@@ -177,3 +177,5 @@ export default {
   imgur,
   downloadThumbnailImage,
 }
+
+export default api
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "test:e2e": "npm run cy:run --",
     "deploy": "vercel -S carbon-app",
     "prettier": "prettier --config .prettierrc --write {.,components,lib,pages}/*.js {components,lib,pages}/**/*.js",
-    "lint": "eslint .",
+    "lint": "next lint --dir .",
     "contrib:add": "all-contributors add",
     "contrib:build": "all-contributors generate",
     "cy:run": "cypress run --config-file cypress/config.json",
@@ -69,11 +69,10 @@
   },
   "devDependencies": {
     "@applitools/eyes-cypress": "^3.23.6",
-    "@babel/core": "^7.16.12",
-    "@babel/eslint-parser": "^7.16.5",
     "all-contributors-cli": "^6.20.0",
     "cypress": "^9.3.1",
     "eslint": "^8.7.0",
+    "eslint-config-next": "^12.0.8",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.28.0",
diff --git a/pages/_document.js b/pages/_document.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 
-export default class extends Document {
+export default class Doc extends Document {
   render() {
     return (
       <Html lang="en">
diff --git a/pages/api/image/[id].js b/pages/api/image/[id].js
@@ -16,7 +16,7 @@ export const config = {
   },
 }
 
-export default async (req, res) => {
+export default async function id(req, res) {
   // TODO proper auth
   if (req.method === 'GET') {
     if (
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@ export const config = {`
`16`	`16`	`},`
`17`	`17`	`}`
`18`	`18`
`19`		`-export default async (req, res) => {`
	`19`	`+export default async function id(req, res) {`
`20`	`20`	`// TODO proper auth`
`21`	`21`	`if (req.method === 'GET') {`
`22`	`22`	`if (`