|
| 1 | +# Getting Started |
| 2 | + |
| 3 | +## :cd: Installation |
| 4 | + |
| 5 | +Use [npm](https://www.npmjs.com/) or a compatible tool. |
| 6 | + |
| 7 | +```sh |
| 8 | +npm install --save-dev eslint eslint-plugin-vue-i18n |
| 9 | +``` |
| 10 | + |
| 11 | +::: tip Requirements |
| 12 | +- ESLint v5.0.0 or later |
| 13 | +- Node.js v10.0.0 or later |
| 14 | +::: |
| 15 | + |
| 16 | +## :rocket: Usage |
| 17 | + |
| 18 | +Configure your `.eslintrc.*` file. |
| 19 | + |
| 20 | +For example: |
| 21 | + |
| 22 | +```js |
| 23 | +{ |
| 24 | + "extends": [ |
| 25 | + "eslint:recommended", |
| 26 | + "plugin:vue-i18n/recommended" |
| 27 | + ], |
| 28 | + "rules": { |
| 29 | + // Optional. |
| 30 | + "vue-i18n/no-dynamic-keys": "error", |
| 31 | + "vue-i18n/no-unused-keys": ["error", { |
| 32 | + "extensions": [".js", ".vue"] |
| 33 | + }] |
| 34 | + }, |
| 35 | + "settings": { |
| 36 | + "vue-i18n": { |
| 37 | + "localeDir": "./path/to/locales/*.json" // extention is glob formatting! |
| 38 | + } |
| 39 | + } |
| 40 | +} |
| 41 | +``` |
| 42 | + |
| 43 | +See [the rule list](../rules/) |
| 44 | + |
| 45 | +### Running ESLint from command line |
| 46 | + |
| 47 | +If you want to run `eslint` from command line, make sure you include the `.vue` and `.json` extension using [the `--ext` option](https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint) or a glob pattern because ESLint targets only `.js` files by default. |
| 48 | + |
| 49 | +Examples: |
| 50 | + |
| 51 | +```bash |
| 52 | +eslint --ext .js,.vue,.json src |
| 53 | +eslint "src/**/*.{js,vue,json}" |
| 54 | +``` |
| 55 | + |
| 56 | +#### How to use custom parser? |
| 57 | + |
| 58 | +If you want to use custom parsers such as [babel-eslint](https://www.npmjs.com/package/babel-eslint) or [typescript-eslint-parser](https://www.npmjs.com/package/typescript-eslint-parser), you have to use `parserOptions.parser` option instead of `parser` option. Because this plugin requires [vue-eslint-parser](https://www.npmjs.com/package/vue-eslint-parser) to parse `.vue` files, so this plugin doesn't work if you overwrote `parser` option. |
| 59 | + |
| 60 | +```diff |
| 61 | +- "parser": "babel-eslint", |
| 62 | + "parserOptions": { |
| 63 | ++ "parser": "babel-eslint", |
| 64 | + "sourceType": "module" |
| 65 | + } |
| 66 | +``` |
| 67 | + |
| 68 | +## :question: FAQ |
| 69 | + |
| 70 | +### What is the "Use the latest vue-eslint-parser" error? |
| 71 | + |
| 72 | +The most rules of `eslint-plugin-vue-i18n` require `vue-eslint-parser` to check `<template>` ASTs. |
| 73 | + |
| 74 | +Make sure you have one of the following settings in your **.eslintrc**: |
| 75 | + |
| 76 | +- `"extends": ["plugin:vue-i18n/recommended"]` |
| 77 | + |
| 78 | +If you already use other parser (e.g. `"parser": "babel-eslint"`), please move it into `parserOptions`, so it doesn't collide with the `vue-eslint-parser` used by this plugin's configuration: |
| 79 | + |
| 80 | +```diff |
| 81 | +- "parser": "babel-eslint", |
| 82 | + "parserOptions": { |
| 83 | ++ "parser": "babel-eslint", |
| 84 | + "ecmaVersion": 2017, |
| 85 | + "sourceType": "module" |
| 86 | + } |
| 87 | +``` |
| 88 | + |
| 89 | +See also: "[Use together with custom parsers](#use-together-with-custom-parsers)" section. |
| 90 | + |
| 91 | +### Why doesn't it work on .vue file? |
| 92 | + |
| 93 | +1. Make sure you don't have `eslint-plugin-html` in your config. The `eslint-plugin-html` extracts the content from `<script>` tags, but `eslint-plugin-vue` requires `<script>` tags and `<template>` tags in order to distinguish template and script in single file components. |
| 94 | + |
| 95 | + ```diff |
| 96 | + "plugins": [ |
| 97 | + "vue", |
| 98 | + - "html" |
| 99 | + ] |
| 100 | + ``` |
| 101 | + |
| 102 | +2. Make sure your tool is set to lint `.vue` and `.json` files. |
| 103 | + - CLI targets only `.js` files by default. You have to specify additional extensions by `--ext` option or glob patterns. E.g. `eslint "src/**/*.{js,vue,json}"` or `eslint src --ext .vue,.json`.o |
0 commit comments