BETA

Vue.jsでの開発でVSCodeにいれるべきたった一つのプラグイン

投稿日:2020-01-24
最終更新:2020-01-24

これ↓
Vue.js Extension Pack

  • 静的検証ツールの「ESLint」
  • フォーマッターの「Prettier」
  • vueのシンタックスハイライトなどを提供してくれる「vetur」
  • ES6のJavaScriptのスニペットを提供してくれる「JavaScript (ES6) Snippets」
  • npmコマンドをサポートしてくれる「npm」

などなど。
他にもたくさんの拡張機能が一気に入ります。
インストールしたら、vueファイルで自動整形されるように、以下をsetting.jsonに記述します。

"eslint.options": {  
  "extensions": [".js", ".vue"]  
},  
"eslint.validate": [  
  {  
    "autoFix": true,  
    "language": "javascript"  
  },  
  {  
    "autoFix": true,  
    "language": "vue"  
  }  
]  

次にeslintを使えるようにするために必要なものをインストールします。

npm install --save-dev eslint prettier babel-eslint eslint-plugin-vue eslint-plugin-prettier eslint-config-prettier vue-eslint-parser  

$ npx eslint --initeslintの設定ファイルである、.eslintrc.jsonまたは.eslintrc.jsを作成し、以下のように記述します。

module.exports = {  
  parser: 'vue-eslint-parser',  
  parserOptions: {  
    parser: 'babel-eslint'  
  },  
  plugins: ['vue'],  
  extends: [  
    'eslint:recommended',  
    'plugin:vue/recommended',  
    'prettier',  
    'prettier/vue'  
  ]  
};  

これで最低限の準備が整いました。

他にもvueでのスニペットを大量に提供してくれるプラグインもあるので、お好みで入れておくといいかもしれない↓
Vue 2 Snippets

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

BЯunoの技術ブログ。日々学んだことを記録していくよ。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう