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

)

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

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),
 }

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,
+      },
+    },
   },
 }

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
+    }
+  }
+}

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

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
+    }
+  }
+}

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

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,