Remove globals from configs (#2674)

ota-meshi · ota-meshi · commit 3c3f71182876 · 2025-03-05T13:32:12.000+09:00
diff --git a/docs/user-guide/index.md b/docs/user-guide/index.md
@@ -11,7 +11,7 @@ npm install --save-dev eslint eslint-plugin-vue
 Via [yarn](https://yarnpkg.com/):
 
 ```bash
-yarn add -D eslint eslint-plugin-vue
+yarn add -D eslint eslint-plugin-vue globals
 ```
 
 ::: tip Requirements
@@ -31,6 +31,8 @@ Example **eslint.config.js**:
 
 ```js
 import pluginVue from 'eslint-plugin-vue'
+import globals from 'globals'
+
 export default [
   // add more generic rulesets here, such as:
   // js.configs.recommended,
@@ -40,6 +42,12 @@ export default [
     rules: {
       // override/add rules settings here, such as:
       // 'vue/no-unused-vars': 'error'
+    },
+    languageOptions: {
+      sourceType: 'module',
+      globals: {
+        ...globals.browser
+      }
     }
   }
 ]
@@ -67,6 +75,48 @@ You can use the following configs by adding them to `eslint.config.js`.
 By default, all rules from **base** and **essential** categories report ESLint errors. Other rules - because they're not covering potential bugs in the application - report warnings. What does it mean? By default - nothing, but if you want - you can set up a threshold and break the build after a certain amount of warnings, instead of any. More information [here](https://eslint.org/docs/user-guide/command-line-interface#handling-warnings).
 :::
 
+#### Specifying Globals (`eslint.config.js`)
+
+Specify global objects depending on how you use Vue.js. More information on how to set globals can be found [here](https://eslint.org/docs/latest/use/configure/language-options#predefined-global-variables).
+
+If you're writing an app that will only render on the browser, use `globals.browser`.
+
+```js
+// ...
+import globals from 'globals'
+
+export default [
+  // ...
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser
+      }
+    }
+  }
+  // ...
+]
+```
+
+If you're writing an app that is rendered both server-side and on the browser, use `globals.shared-node-browser`.
+
+```js
+// ...
+import globals from 'globals'
+
+export default [
+  // ...
+  {
+    languageOptions: {
+      globals: {
+        ...globals['shared-node-browser']
+      }
+    }
+  }
+  // ...
+]
+```
+
 #### Example configuration with [typescript-eslint](https://typescript-eslint.io/) and [Prettier](https://prettier.io/)
 
 ```bash
@@ -152,6 +202,30 @@ This plugin supports the basic syntax of Vue.js 3.2, `<script setup>`, and CSS v
 If you have issues with these, please also refer to the [FAQ](#does-not-work-well-with-script-setup). If you can't find a solution, search for the issue and if the issue doesn't exist, open a new issue.
 :::
 
+#### Specifying Environments (`.eslintrc`)
+
+Specify environments depending on how you use Vue.js. More information on how to set environments can be found [here](https://eslint.org/docs/latest/use/configure/language-options-deprecated#specifying-environments).
+
+If you're writing an app that will only render on the browser, use `env.browser`.
+
+```json
+{
+  "env": {
+    "browser": true
+  }
+}
+```
+
+If you're writing an app that is rendered both server-side and on the browser, use `env.shared-node-browser`.
+
+```json
+{
+  "env": {
+    "shared-node-browser": true
+  }
+}
+```
+
 ### Running ESLint from the command line
 
 If you want to run `eslint` from the command line, ESLint will automatically check for the `.vue` extension if you use the config provided by the plugin.
diff --git a/lib/configs/base.js b/lib/configs/base.js
@@ -3,13 +3,11 @@
  * This file has been automatically generated,
  * in order to update its content execute "npm run update"
  */
-const globals = require('globals')
 module.exports = {
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module'
   },
-  globals: globals.browser,
   plugins: ['vue'],
   rules: {
     'vue/comment-directive': 'error',
diff --git a/lib/configs/flat/base.js b/lib/configs/flat/base.js
@@ -3,7 +3,6 @@
  * This file has been automatically generated,
  * in order to update its content execute "npm run update"
  */
-const globals = require('globals')
 module.exports = [
   {
     name: 'vue/base/setup',
@@ -13,8 +12,7 @@ module.exports = [
       }
     },
     languageOptions: {
-      sourceType: 'module',
-      globals: globals.browser
+      sourceType: 'module'
     }
   },
   {
@@ -27,8 +25,7 @@ module.exports = [
     },
     languageOptions: {
       parser: require('vue-eslint-parser'),
-      sourceType: 'module',
-      globals: globals.browser
+      sourceType: 'module'
     },
     rules: {
       'vue/comment-directive': 'error',
diff --git a/package.json b/package.json
@@ -59,7 +59,6 @@
   },
   "dependencies": {
     "@eslint-community/eslint-utils": "^4.4.0",
-    "globals": "^15.14.0",
     "natural-compare": "^1.4.0",
     "nth-check": "^2.1.1",
     "postcss-selector-parser": "^6.0.15",
@@ -91,6 +90,7 @@
     "eslint-plugin-vue": "file:.",
     "espree": "^9.6.1",
     "events": "^3.3.0",
+    "globals": "^15.14.0",
     "jsdom": "^22.0.0",
     "markdownlint-cli": "^0.42.0",
     "mocha": "^10.7.3",
diff --git a/tools/update-lib-configs.js b/tools/update-lib-configs.js
@@ -55,13 +55,11 @@ function formatCategory(category) {
  * This file has been automatically generated,
  * in order to update its content execute "npm run update"
  */
-const globals = require('globals')
 module.exports = {
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module'
   },
-  globals: globals.browser,
   plugins: [
     'vue'
   ],
diff --git a/tools/update-lib-flat-configs.js b/tools/update-lib-flat-configs.js
@@ -55,7 +55,6 @@ function formatCategory(category) {
  * This file has been automatically generated,
  * in order to update its content execute "npm run update"
  */
-const globals = require('globals')
 module.exports = [
   {
     name: 'vue/base/setup',
@@ -66,7 +65,6 @@ module.exports = [
     },
     languageOptions: {
       sourceType: 'module',
-      globals: globals.browser
     }
   },
   {
@@ -80,7 +78,6 @@ module.exports = [
     languageOptions: {
       parser: require('vue-eslint-parser'),
       sourceType: 'module',
-      globals: globals.browser
     },
     rules: ${formatRules(category.rules, category.categoryId)},
     processor: 'vue/vue'
