1 | # vue-eslint-parser
|
2 |
|
3 | [![npm version](https://img.shields.io/npm/v/vue-eslint-parser.svg)](https://www.npmjs.com/package/vue-eslint-parser)
|
4 | [![Downloads/month](https://img.shields.io/npm/dm/vue-eslint-parser.svg)](http://www.npmtrends.com/vue-eslint-parser)
|
5 | [![Build Status](https://github.com/mysticatea/vue-eslint-parser/workflows/CI/badge.svg)](https://github.com/mysticatea/vue-eslint-parser/actions)
|
6 | [![Coverage Status](https://codecov.io/gh/mysticatea/vue-eslint-parser/branch/master/graph/badge.svg)](https://codecov.io/gh/mysticatea/vue-eslint-parser)
|
7 | [![Dependency Status](https://david-dm.org/mysticatea/vue-eslint-parser.svg)](https://david-dm.org/mysticatea/vue-eslint-parser)
|
8 |
|
9 | The ESLint custom parser for `.vue` files.
|
10 |
|
11 | ## โคด๏ธ Motivation
|
12 |
|
13 | This parser allows us to lint the `<template>` of `.vue` files. We can make mistakes easily on `<template>` if we use complex directives and expressions in the template. This parser and the rules of [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) would catch some of the mistakes.
|
14 |
|
15 | ## ๐ฟ Installation
|
16 |
|
17 | ```bash
|
18 | $ npm install --save-dev eslint vue-eslint-parser
|
19 | ```
|
20 |
|
21 | - Requires Node.js 6.5.0 or later.
|
22 | - Requires ESLint 5.0.0 or later.
|
23 | - Requires `babel-eslint` 8.1.1 or later if you want it. (optional)
|
24 | - Requires `@typescript-eslint/parser` 1.0.0 or later if you want it. (optional)
|
25 |
|
26 | ## ๐ Usage
|
27 |
|
28 | 1. Write `parser` option into your `.eslintrc.*` file.
|
29 | 2. Use glob patterns or `--ext .vue` CLI option.
|
30 |
|
31 | ```json
|
32 | {
|
33 | "extends": "eslint:recommended",
|
34 | "parser": "vue-eslint-parser"
|
35 | }
|
36 | ```
|
37 |
|
38 | ```console
|
39 | $ eslint "src/**/*.{js,vue}"
|
40 | # or
|
41 | $ eslint src --ext .vue
|
42 | ```
|
43 |
|
44 | ## ๐ง Options
|
45 |
|
46 | `parserOptions` has the same properties as what [espree](https://github.com/eslint/espree#usage), the default parser of ESLint, is supporting.
|
47 | For example:
|
48 |
|
49 | ```json
|
50 | {
|
51 | "parser": "vue-eslint-parser",
|
52 | "parserOptions": {
|
53 | "sourceType": "module",
|
54 | "ecmaVersion": 2018,
|
55 | "ecmaFeatures": {
|
56 | "globalReturn": false,
|
57 | "impliedStrict": false,
|
58 | "jsx": false
|
59 | }
|
60 | }
|
61 | }
|
62 | ```
|
63 |
|
64 | ### parserOptions.parser
|
65 |
|
66 | You can use `parserOptions.parser` property to specify a custom parser to parse `<script>` tags.
|
67 | Other properties than parser would be given to the specified parser.
|
68 | For example:
|
69 |
|
70 | ```json
|
71 | {
|
72 | "parser": "vue-eslint-parser",
|
73 | "parserOptions": {
|
74 | "parser": "babel-eslint",
|
75 | "sourceType": "module",
|
76 | "allowImportExportEverywhere": false
|
77 | }
|
78 | }
|
79 | ```
|
80 |
|
81 | ```json
|
82 | {
|
83 | "parser": "vue-eslint-parser",
|
84 | "parserOptions": {
|
85 | "parser": "@typescript-eslint/parser"
|
86 | }
|
87 | }
|
88 | ```
|
89 |
|
90 | If the `parserOptions.parser` is `false`, the `vue-eslint-parser` skips parsing `<script>` tags completely.
|
91 | This is useful for people who use the language ESLint community doesn't provide custom parser implementation.
|
92 |
|
93 | ## ๐ Usage for custom rules / plugins
|
94 |
|
95 | - This parser provides `parserServices` to traverse `<template>`.
|
96 | - `defineTemplateBodyVisitor(templateVisitor, scriptVisitor)` ... returns ESLint visitor to traverse `<template>`.
|
97 | - `getTemplateBodyTokenStore()` ... returns ESLint `TokenStore` to get the tokens of `<template>`.
|
98 | - `getDocumentFragment()` ... returns the root `VDocumentFragment`.
|
99 | - [ast.md](./docs/ast.md) is `<template>` AST specification.
|
100 | - [mustache-interpolation-spacing.js](https://github.com/vuejs/eslint-plugin-vue/blob/b434ff99d37f35570fa351681e43ba2cf5746db3/lib/rules/mustache-interpolation-spacing.js) is an example.
|
101 |
|
102 | ## โ ๏ธ Known Limitations
|
103 |
|
104 | Some rules make warnings due to the outside of `<script>` tags.
|
105 | Please disable those rules for `.vue` files as necessary.
|
106 |
|
107 | - [eol-last](http://eslint.org/docs/rules/eol-last)
|
108 | - [linebreak-style](http://eslint.org/docs/rules/linebreak-style)
|
109 | - [max-len](http://eslint.org/docs/rules/max-len)
|
110 | - [max-lines](http://eslint.org/docs/rules/max-lines)
|
111 | - [no-trailing-spaces](http://eslint.org/docs/rules/no-trailing-spaces)
|
112 | - [unicode-bom](http://eslint.org/docs/rules/unicode-bom)
|
113 | - Other rules which are using the source code text instead of AST might be confused as well.
|
114 |
|
115 | ## ๐ฐ Changelog
|
116 |
|
117 | - [GitHub Releases](https://github.com/mysticatea/vue-eslint-parser/releases)
|
118 |
|
119 | ## ๐ป Contributing
|
120 |
|
121 | Welcome contributing!
|
122 |
|
123 | Please use GitHub's Issues/PRs.
|
124 |
|
125 | If you want to write code, please execute `npm install && npm run setup` after you cloned this repository.
|
126 | The `npm install` command installs dependencies.
|
127 | The `npm run setup` command initializes ESLint as git submodules for tests.
|
128 |
|
129 | ### Development Tools
|
130 |
|
131 | - `npm test` runs tests and measures coverage.
|
132 | - `npm run build` compiles TypeScript source code to `index.js`, `index.js.map`, and `index.d.ts`.
|
133 | - `npm run coverage` shows the coverage result of `npm test` command with the default browser.
|
134 | - `npm run clean` removes the temporary files which are created by `npm test` and `npm run build`.
|
135 | - `npm run lint` runs ESLint.
|
136 | - `npm run setup` setups submodules to develop.
|
137 | - `npm run update-fixtures` updates files in `test/fixtures/ast` directory based on `test/fixtures/ast/*/source.vue` files.
|
138 | - `npm run watch` runs `build`, `update-fixtures`, and tests with `--watch` option.
|