はじめに
ゆとり世代の中野です。
今回チャレンジした内容は【ESLintとPrettierの導入する】です。
さっそくチャレンジについて書いていきます。
チャレンジする背景
- Projectを新規作成した場合は当然ESLintとPrettierもないのでそれらを導入する忘備録を作りたい
チャレンジ内容
- ExpoにESLintとPrettierの導入する
前提
- 新規作成したTypescriptのProject
ESLint
必要なpackageの導入
yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react.eslintrc.jsを追加
yarn eslint --init
module.exports = {
env: {
es2021: true,
node: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: ['react', '@typescript-eslint', 'react-hooks'],
rules: {
indent: ['error', 2],
'linebreak-style': ['error', 'unix'],
quotes: ['error', 'single'],
semi: ['error', 'always'],
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
'react/display-name': 0,
'react/prop-types': 0,
},
settings: {
react: {
version: 'detect',
},
},
};Prettier
必要なpackageの導入
yarn add -D prettier eslint-config-prettier.prettierrc.jsを追加
module.exports = {
jsxSingleQuote: true,
singleQuote: true,
trailingComma: 'all',
printWidth: 100,
endOfLine: 'lf',
};VSCodeの設定
- .vscode/settings.jsonに設定を追加
- 保存時に自動で整形されるようになります
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}参考元
- React Native(Expo + TypeScript)用にEslint,Prettierの設定をする
eslint-plugin-prettierは非推奨のため導入していないです- 設定周りを参考にしました
- ESLint + Prettierを導入したTypeScript開発環境
- パッケージを参考にしました
まとめ
- ESLintのpackageと設定を追加
- Prettierのpackageと設定を追加
- VSCodeの設定を追加
さいごに
これでコードが整形されるようになりました
yutanakano
WEBエンジニア
大阪生まれのゆとり世代です
趣味はバイクでツーリングに行くこと
愛車は Ninja ZX-25R SE KRT EDITION
Expoでプロダクトを作っています
