# Getting Started
# 💿 Installation
Use npm (opens new window) or a compatible tool.
npm install --save-dev eslint @intlify/eslint-plugin-vue-i18n
Requirements
- ESLint v5.0.0 or later
- Node.js v10.13.0 or later
# 🚀 Usage
Configure your .eslintrc.*
file.
For example:
module.export = {
extends: [
'eslint:recommended',
// Recommended
'plugin:@intlify/vue-i18n/recommended'
],
rules: {
// Optional.
'@intlify/vue-i18n/no-dynamic-keys': 'error',
'@intlify/vue-i18n/no-unused-keys': [
'error',
{
extensions: ['.js', '.vue']
}
]
},
settings: {
'vue-i18n': {
localeDir: './path/to/locales/*.{json,json5,yaml,yml}', // extension is glob formatting!
// or
// localeDir: {
// pattern: './path/to/locales/*.{json,json5,yaml,yml}', // extension is glob formatting!
// localeKey: 'file' // or 'key'
// }
// or
// localeDir: [
// {
// pattern: './path/to/locales1/*.{json,json5,yaml,yml}',
// localeKey: 'file' // or 'key'
// },
// {
// pattern: './path/to/locales2/*.{json,json5,yaml,yml}',
// localeKey: 'file' // or 'key'
// },
// ]
// Specify the version of `vue-i18n` you are using.
// If not specified, the message will be parsed twice.
messageSyntaxVersion: '^9.0.0'
}
}
}
See the rule list
# settings['vue-i18n']
localeDir
... You can specify a string or an object or an array.- String option ... A glob for specifying files that store localization messages of project.
- Object option
pattern
(string
) ... A glob for specifying files that store localization messages of project.localeKey
('file' | 'key'
) ... Specifies how to determine the locale for localization messages.'file'
... Determine the locale name from the filename. The resource file should only contain messages for that locale. Use this option if you usevue-cli-plugin-i18n
. This option is also used when String option is specified.'key'
... Determine the locale name from the root key name of the file contents. The value of that key should only contain messages for that locale. Used when the resource file is in the format given to themessages
option of theVueI18n
constructor option.
- Array option ... An array of String option and Object option. Useful if you have multiple locale directories.
messageSyntaxVersion
(Optional) ... Specify the version ofvue-i18n
you are using. If not specified, the message will be parsed twice. Also, some rules require this setting.
# Running ESLint from command line
If you want to run eslint
from command line, make sure you include the .vue
, .json
, .json5
, .yaml
and .yml
extension using the --ext
option (opens new window) or a glob pattern because ESLint targets only .js
files by default.
Examples:
eslint --ext .js,.vue,.json src
eslint "src/**/*.{js,vue,json}"
# Specify the extension you use.
# - use YAML?
# eslint --ext .js,.vue,.yaml,.yml src
# eslint "src/**/*.{js,vue,yaml,yml}"
# - use JSON5?
# eslint --ext .js,.vue,.json5 src
# eslint "src/**/*.{js,vue,json5}"
# How to use custom parser?
If you want to use custom parsers such as babel-eslint (opens new window) or typescript-eslint-parser (opens new window), you have to use parserOptions.parser
option instead of parser
option. Because this plugin requires vue-eslint-parser (opens new window) to parse .vue
files, so this plugin doesn't work if you overwrote parser
option.
Also, parserOptions
configured at the top level affect .json
and .yaml
. This plugin needs to use special parsers to parse .json
and .yaml
, so to correctly parse each extension, use the overrides
option and overwrite the options again.
- "parser": "babel-eslint",
"parserOptions": {
+ "parser": "babel-eslint",
"sourceType": "module"
},
+ "overrides": [
+ {
+ "files": ["*.json", "*.json5"],
+ "extends": ["plugin:@intlify/vue-i18n/base"],
+ },
+ {
+ "files": ["*.yaml", "*.yml"],
+ "extends": ["plugin:@intlify/vue-i18n/base"],
+ }
+ ]
# More lint on JSON and YAML in <i18n>
block
You can install eslint-plugin-jsonc (opens new window) and eslint-plugin-yml (opens new window). These 2 plugins support Vue custom blocks.
You can also use jsonc/vue-custom-block/no-parsing-error (opens new window) and yml/vue-custom-block/no-parsing-error (opens new window) rules to find JSON and YAML parsing errors.
# ❓ FAQ
# What is the "Use the latest vue-eslint-parser" error?
The most rules of eslint-plugin-vue-i18n
require vue-eslint-parser
to check <template>
ASTs.
Make sure you have one of the following settings in your .eslintrc:
"extends": ["plugin:@intlify/vue-i18n/recommended"]
"extends": ["plugin:@intlify/vue-i18n/base"]
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:
- "parser": "babel-eslint",
"parserOptions": {
+ "parser": "babel-eslint",
"ecmaVersion": 2017,
"sourceType": "module"
}
See also: "Use together with custom parsers" section.
# Why doesn't it work on .vue file?
- Make sure you don't have
eslint-plugin-html
in your config. Theeslint-plugin-html
extracts the content from<script>
tags, buteslint-plugin-vue
requires<script>
tags and<template>
tags in order to distinguish template and script in single file components.
"plugins": [
"vue",
- "html"
]
- Make sure your tool is set to lint
.vue
and.json
files.
- 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}"
oreslint src --ext .vue,.json
.o