eslint-plugin-prettier-vue

Make prettier works better on Vue SFC

• Includes all functions of eslint-plugin-prettier.
• Provides the ability for prettier to process custom blocks of Vue SFCs.
• Options to disable prettier for <template>, <script> or <style> blocks of Vue SFCs.

Demo

Prettier custom blocks:

Usage

Installation

1npm install --save-dev \
2  eslint-plugin-prettier-vue \
3  eslint-plugin-vue \
4  eslint-config-prettier \
5  eslint \
6  prettier

ESLint Config

DO NOT use eslint-plugin-prettier together. This plugin includes all functionalities of eslint-plugin-prettier so you do not need it.

1// .eslintrc.js
2module.exports = {
3  extends: ['plugin:vue/recommended', 'plugin:prettier-vue/recommended'],
4
5  settings: {
6    'prettier-vue': {
7      // Settings for how to process Vue SFC Blocks
8      SFCBlocks: {
9        /**
10         * Use prettier to process `<template>` blocks or not
11         *
12         * If set to `false`, you may need to enable those vue rules that are disabled by `eslint-config-prettier`,
13         * because you need them to lint `<template>` blocks
14         *
15         * @default true
16         */
17        template: true,
18
19        /**
20         * Use prettier to process `<script>` blocks or not
21         *
22         * If set to `false`, you may need to enable those rules that are disabled by `eslint-config-prettier`,
23         * because you need them to lint `<script>` blocks
24         *
25         * @default true
26         */
27        script: true,
28
29        /**
30         * Use prettier to process `<style>` blocks or not
31         *
32         * @default true
33         */
34        style: true,
35
36        // Settings for how to process custom blocks
37        customBlocks: {
38          // Treat the `<docs>` block as a `.markdown` file
39          docs: { lang: 'markdown' },
40
41          // Treat the `<config>` block as a `.json` file
42          config: { lang: 'json' },
43
44          // Treat the `<module>` block as a `.js` file
45          module: { lang: 'js' },
46
47          // Ignore `<comments>` block (omit it or set it to `false` to ignore the block)
48          comments: false,
49
50          // Other custom blocks that are not listed here will be ignored
51        },
52      },
53
54      // Use prettierrc for prettier options or not (default: `true`)
55      usePrettierrc: true,
56
57      // Set the options for `prettier.getFileInfo`.
58      // @see https://prettier.io/docs/en/api.html#prettiergetfileinfofilepath-options
59      fileInfoOptions: {
60        // Path to ignore file (default: `'.prettierignore'`)
61        // Notice that the ignore file is only used for this plugin
62        ignorePath: '.testignore',
63
64        // Process the files in `node_modules` or not (default: `false`)
65        withNodeModules: false,
66      },
67    },
68  },
69
70  rules: {
71    'prettier-vue/prettier': [
72      'error',
73      {
74        // Override all options of `prettier` here
75        // @see https://prettier.io/docs/en/options.html
76        printWidth: 100,
77        singleQuote: true,
78        semi: false,
79        trailingComma: 'es5',
80      },
81    ],
82  },
83};

LICENSE

MIT © @meteorlxy & Contributors

MIT © eslint-plugin-prettier