はじめに
ゆとり世代の中野です。
今回チャレンジした内容は【VSCodeで保存時に自動でLintされるようにする】です。
さっそくチャレンジについて書いていきます。
チャレンジする背景
- よく設定を忘れるので忘備録
チャレンジ内容
- VSCodeで保存するタイミングで自動でLintされるようにします
やり方
VSCode
- プラグインを入れる
- VSCodeを再起動する
Project
- 必要なpackageをインストールする
npm install --save-dev eslint prettier eslint-config-prettier
- eslintの設定ファイルを作成
npx eslint --init
- 各質問の解答は以下
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-standard@latest
✔ The style guide "standard" requires eslint@^7.12.1. You are currently using eslint@8.10.0.
Do you want to downgrade? · No / Yes
- .eslintrc.jsに
prettier
の設定を追加
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'standard',
'prettier'
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: [
'@typescript-eslint'
],
rules: {
}
}
- .vscode/settings.jsonに設定を追加
{
// フォーマッターをPrettierにする
"editor.defaultFormatter": "esbenp.prettier-vscode",
// ファイル保存時にフォーマットを実行
"editor.formatOnSave": true
}
まとめ
- VSCodeにプラグインを入れて適用させる
- Projectにpackage類をインストールする
- 各種設定ファイルを作成する
さいごに
新規Projectで最初にやっておきたい設定ですが忘れがちなので忘備録になります
yutanakano
WEBエンジニア
大阪生まれのゆとり世代です
趣味はバイクでツーリングに行くこと
愛車は Ninja ZX-25R SE KRT EDITION
Expoでプロダクトを作っています