Help us understand the problem. What is going on with this article?

Vscode使用時にVueの整形ルールがごっちゃになるのをどうにかしたい

はじめに

vscodeでvueの開発をしているときに、しばしばコード整形ルールが競合を起こしておかしな形で整形されエラーや警告だらけになってしまう。

自分の場合、慣例的にGoogle JavaScript Styleを採用しているので更にややこしいことになってしまっている。

特に困るのが以下の問題である:

  • シングルクオートにならない
  • 配列の末尾にカンマが入らない
  • 行の終わりのセミコロンが消える
  • <template>内のタグの属性が同じ行になってしまう

結論

結論から先にいうと、vscodeのprettierがeslintの値を読まないのが原因だった。eslintのprettier/prettierの値と同じ内容の.prettierrc.jsを作成することで解決できた。

<template>タグ内の整形ルールがおかしいのはprettierのバグのようなのでoffで無効化し、eslint-plugin-vueのルールを採用するようにする。(参考:prettier not fixing vue/max-attributes-per-line

なお、vueのバージョンが新しくなってエラー扱いになるのは嫌なのでvueのコード整形ルールはvue3-recommendedを採用。vue3ではfiltersmethodsと統合され非推奨になるので注意。

npm install -D eslint-plugin-vue@next eslint-config-google
.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'google',
    'plugin:vue/vue3-recommended',
    'eslint:recommended',
    '@vue/prettier',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  plugins: ['vue', 'prettier'],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    quotes: ['error', 'single'],
    'prettier/prettier': [
      'error',
      {
        htmlWhitespaceSensitivity: 'ignore',
        semi: true,
        singleQuote: true,
        trailingComma: 'all',
      },
    ],
    'vue/max-attributes-per-line': 'off',
  },
};
.prettierrc.js
module.exports = {
  htmlWhitespaceSensitivity: 'ignore',
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
};

Veturは推奨プラグインになっているが、コード整形にprettierを使う場合は外したほうがいいようである。

おまけ

さて、vueのプロジェクトをつくったときに整形ルールにしばしば以下の行が追加される。

.eslintrc.js
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

しかし、要はプロダクションモードのときにconsole.log()が表示されないようにすればいいのでわざわざルールとして入れる必用はないと思う。

そこで、前回使ったTerserPluginを使って圧縮し、同時にconsole.log()の削除を行うようvue.config.jsを修正する。

npm install -D terser-webpack-plugin
vue.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  configureWebpack: {
    // ...省略
    optimization: {
      minimize: process.env.NODE_ENV === 'production',
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            ascii_only: true,
            compress: { drop_console: true },
            mangle: true,
            ecma: 6,
            output: { comments: false, beautify: false },
          },
        }),
      ],
    },
  },
  // ...省略
};

圧縮率の比較

圧縮前 デフォルト Terser
app.js 191 kB 11 kB 11 kB
chunk-vendor.js 8481 KB 257 kB 252 kB

デフォルトの圧縮プログラムよりも1.9%容量が少なくなりました。(Terserの設定を変えればもう少し削れるかも)

logue
アイコンはELFフォーマットとのダジャレだったり。
https://logue.dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした