diff --git a/docs/user-guide/index.md b/docs/user-guide/index.md index 6b37b041e..fcd7ff45c 100644 --- 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, `