[eslint] move core-web-vitals config to eslint-plugin-next (vercel#27363)

stefanprobst · web-flow · commit daf54bb2b0bb · 2021-07-23T17:58:53.000Z
this pr moves the "core-web-vitals" config from `eslint-config-next` to `eslint-plugin-next`. Fixes: vercel#27292 ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [x] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes
diff --git a/packages/eslint-config-next/core-web-vitals.js b/packages/eslint-config-next/core-web-vitals.js
@@ -1,7 +1,3 @@
 module.exports = {
-  extends: ['.'].map(require.resolve),
-  rules: {
-    '@next/next/no-sync-scripts': 2,
-    '@next/next/no-html-link-for-pages': 2,
-  },
+  extends: ['.', 'plugin:@next/next/core-web-vitals'].map(require.resolve),
 }
diff --git a/packages/eslint-plugin-next/lib/index.js b/packages/eslint-plugin-next/lib/index.js
@@ -33,5 +33,13 @@ module.exports = {
         '@next/next/no-duplicate-head': 2,
       },
     },
+    'core-web-vitals': {
+      plugins: ['@next/next'],
+      extends: ['plugin:@next/next/recommended'],
+      rules: {
+        '@next/next/no-sync-scripts': 2,
+        '@next/next/no-html-link-for-pages': 2,
+      },
+    },
   },
 }
diff --git a/test/integration/eslint/plugin-core-web-vitals-config/.eslintrc b/test/integration/eslint/plugin-core-web-vitals-config/.eslintrc
@@ -0,0 +1,11 @@
+{
+  "extends": "plugin:@next/next/core-web-vitals",
+  "root": true,
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 2015,
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  }
+}
diff --git a/test/integration/eslint/plugin-core-web-vitals-config/pages/index.js b/test/integration/eslint/plugin-core-web-vitals-config/pages/index.js
@@ -0,0 +1,9 @@
+const Home = () => (
+  <div>
+    <p>Home</p>
+    <script src="https://example.com" />
+    <img src="https://example.com/image.png" />
+  </div>
+)
+
+export default Home
diff --git a/test/integration/eslint/plugin-recommended-config/.eslintrc b/test/integration/eslint/plugin-recommended-config/.eslintrc
@@ -0,0 +1,11 @@
+{
+  "extends": "plugin:@next/next/recommended",
+  "root": true,
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 2015,
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  }
+}
diff --git a/test/integration/eslint/plugin-recommended-config/pages/index.js b/test/integration/eslint/plugin-recommended-config/pages/index.js
@@ -0,0 +1,10 @@
+import Document from 'next/document'
+
+const Home = () => (
+  <div>
+    <p>Home</p>
+    <script src="https://example.com" />
+  </div>
+)
+
+export default Home
diff --git a/test/integration/eslint/test/index.test.js b/test/integration/eslint/test/index.test.js
@@ -8,6 +8,14 @@ jest.setTimeout(1000 * 60 * 2)
 
 const dirFirstTimeSetup = join(__dirname, '../first-time-setup')
 const dirCustomConfig = join(__dirname, '../custom-config')
+const dirPluginRecommendedConfig = join(
+  __dirname,
+  '../plugin-recommended-config'
+)
+const dirPluginCoreWebVitalsConfig = join(
+  __dirname,
+  '../plugin-core-web-vitals-config'
+)
 const dirIgnoreDuringBuilds = join(__dirname, '../ignore-during-builds')
 const dirCustomDirectories = join(__dirname, '../custom-directories')
 const dirConfigInPackageJson = join(__dirname, '../config-in-package-json')
@@ -159,6 +167,44 @@ describe('ESLint', () => {
       )
     })
 
+    test('shows warnings and errors when extending plugin recommended config', async () => {
+      const { stdout, stderr } = await nextLint(
+        dirPluginRecommendedConfig,
+        [],
+        {
+          stdout: true,
+          stderr: true,
+        }
+      )
+
+      const output = stdout + stderr
+      expect(output).toContain(
+        'Warning: External synchronous scripts are forbidden'
+      )
+      expect(output).toContain(
+        'Error: next/document should not be imported outside of pages/_document.js.'
+      )
+    })
+
+    test('shows warnings and errors when extending plugin core-web-vitals config', async () => {
+      const { stdout, stderr } = await nextLint(
+        dirPluginCoreWebVitalsConfig,
+        [],
+        {
+          stdout: true,
+          stderr: true,
+        }
+      )
+
+      const output = stdout + stderr
+      expect(output).toContain(
+        "Warning: Do not use <img>. Use Image from 'next/image' instead."
+      )
+      expect(output).toContain(
+        'Error: External synchronous scripts are forbidden'
+      )
+    })
+
     test('success message when no warnings or errors', async () => {
       const { stdout, stderr } = await nextLint(dirFirstTimeSetup, [], {
         stdout: true,

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,3 @@`
`1`	`1`	`module.exports = {`
`2`		`- extends: ['.'].map(require.resolve),`
`3`		`- rules: {`
`4`		`- '@next/next/no-sync-scripts': 2,`
`5`		`- '@next/next/no-html-link-for-pages': 2,`
`6`		`- },`
	`2`	`+ extends: ['.', 'plugin:@next/next/core-web-vitals'].map(require.resolve),`
`7`	`3`	`}`