#やること
- aptでnodeとnpmをインストール
- npmをアップデートしてからyarnをインストール
- yarnでnをインストールして最新のnodejsをインストール
- yarnでプラグインをインストール
#開発環境
Linux
npm,yarn,n,typescript インストール
sudo apt install nodejs npm yarn && sudo npm install -U npm && sudo npm install -g n && sudo n stable
yarn globalのパスを通す
.rc
export PATH="$(yarn global bin):$PATH"
プロジェクトディレクトリに移動
Step1. yarn init
yarn init
####yarnのチートシート
https://qiita.com/morrr/items/558bf64cd619ebdacd3d
Step2. 開発用のプラグインとしてインストール
インストールする前にまず --save-dev
or --dev/-D
とは何かを予習復習。
これらは開発用の依存関係です。開発ワークフローのどこかで必要で、コードの実行時には必要のない依存関係です(例:Babel もしくは Flow)。
https://legacy.yarnpkg.com/ja/docs/dependency-types#toc-devdependencies
####すべてインストール
yarn add -D eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin react eslint-plugin-react
####別々にインストール
elsintとprittierインストール
yarn add -D eslint prettier eslint-config-prettier eslint-plugin-prettier
typescript用プラグイン
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
その他プラグイン
yarn add react && yarn add -D eslint-plugin-react
##Step3. eslintrcを作成
まずここを読め!
ESLint公式 https://eslint.org/docs/user-guide/configuring
JS 用
json-doc.eslintrc.json
{
"extends": [
"eslint:recommended",
"plugin:prettier/recommended"
],
"plugins":[],
"parserOptions":[],
"env": {
"node": true,
"browser": true,
"es6": true
},
"rules": {
"prettier/prettier": [
"error",
{
"singleQuote": true,
"trailingComma": "es5"
}
]
},
}
TS 用
.eslintrc.json
{
"env": {
"node" : true,
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint",
"plugin:prettier/recommended"
],
"plugins": [
"react",
"@typescript-eslint",
"prettier"],
"rules": {
"prettier/prettier": [
"error",
{
"singleQuote": true,
"trailingComma": "es5"
}
]
},
"parser": "@typescript-eslint/parser"
}
#VSCODE
##tsconfig.json
tsc --init
これ忘れるとエラーが出まくるので注意。
##settings.json
まずここを読む!
prettier-vscode https://github.com/prettier/prettier-vscode
settings.json
{
// -------------------------------------
// javascript
// -------------------------------------
"[javascript]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2,
"editor.codeActionsOnSave":{
"source.fixAll.eslint": true,
}
},
// -------------------------------------
// typescript
// -------------------------------------
"[typescript]": {
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
},
// -------------------------------------
// pretteir
// -------------------------------------
"prettier.singleQuote": true,
"prettier.printWidth": 80,
// -------------------------------------
// ESLint
// -------------------------------------
"eslint.enable": true,
"eslint.packageManager":"yarn",
//// -------------------------------------
//// format
//// -------------------------------------
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true, // 言語ごとに設定する
"editor.formatOnPaste": false,
}