Skip to content
👌 ESLint plugin for Prettier formatting, which is better for Vue SFC
JavaScript Vue
Branch: master
Clone or download

README.md

eslint-plugin-prettier-vue

npm prettier GitHub

Make prettier work better with eslint-plugin-vue on .vue files

Demo

demo

Works with <script>, <style> and custom blocks:

demo-custom-blocks

Usage

Installation

npm install --save-dev \
  eslint-plugin-prettier-vue \
  eslint-plugin-vue \
  eslint-config-prettier \
  eslint \
  prettier

ESLint Config

// .eslintrc.js
module.exports = {
  extends: [
    'plugin:vue/recommended',
    'plugin:prettier-vue/recommended',
  ],

  settings: {
    'prettier-vue': {
      // Settings for how to process the custom blocks
      customBlocks: {
        // Treat the `<docs>` block as a `.markdown` file
        docs: { lang: 'markdown' },

        // Treat the `<config>` block as a `.json` file
        config: { lang: 'json' },

        // Treat the `<module>` block as a `.js` file
        module: { lang: 'js' },

        // Ignore `<comments>` block (omit it or set it to `false` to ignore the block)
        comments: false,

        // Other custom blocks that are not listed here will be ignored, too
      },

      // Use prettierrc for prettier options or not (default: `true`)
      usePrettierrc: true,

      // Set the options for `prettier.getFileInfo`.
      // @see https://prettier.io/docs/en/api.html#prettiergetfileinfofilepath-options
      fileInfoOptions: {
        // Path to ignore file (default: `'.prettierignore'`)
        // Notice that the ignore file is only used for this plugin
        ignorePath: '.testignore',

        // Process the files in `node_modules` or not (default: `false`)
        withNodeModules: false,

        // Array of plugins (default: `[]`)
        // @see https://prettier.io/docs/en/plugins.html
        plugins: ['@prettier/plugin-pug'],
      },
    },
  },

  rules: {
    'prettier-vue/prettier': [
      'error',
      {
        // Override all options of `prettier` here
        // @see https://prettier.io/docs/en/options.html
        printWidth: 100,
        singleQuote: true,
        semi: false,
        trailingComma: 'es5',
      },
    ],
  },
}
  • DO NOT use eslint-plugin-prettier together. This plugin is based on eslint-plugin-prettier so you do not need it.
  • DO NOT add extends: ['prettier/vue'], as you need the rules from eslint-plugin-vue to lint the <template> block of .vue files.

LICENSE

MIT © @meteorlxy & Contributors

You can’t perform that action at this time.