# はじめに
最近、VSCode 拡張のRemote Containers (opens new window)を使って、 Docker の node イメージを動かすことが多いので自分用のメモがてらに諸々のファイルをのっけておこうと思った次第です
# おしながき
階層はこんな感じ
.
├── .devcontainer
│ ├── devcontainer.json
│ └── docker-compose.yml
├── .eslintrc.json
├── .prettierrc.json
├── Dockerfile
├── docker-compose.yml
├── package-lock.json
├── package.json
└── tsconfig.json
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# Dockerfile
zsh やら git やらを入れています
あとはコンテナ内で Docker を使えるように Docker outside of Docker でなんとか使えるようにしています(でも Docker コンテナ内で Docker を使うような状況は避けれるなら避けたほうがいい...)
package-lock.jsonを用意していないと COPY できないのでビルドする前に手元でnpm iを走らせておいてください
yarn を使う方はいい感じに書き換えてください
FROM node:lts-slim
COPY --from=docker /usr/local/bin/docker /usr/local/bin/docker
WORKDIR /tmp
RUN set -x \
&& apt-get update \
&& apt-get install -y git zsh\
&& git clone --depth=1 https://github.com/ohyama4z/dotfiles.git ~/dotfiles \
&& cd ~/dotfiles \
&& git submodule update --init --recursive --recommend-shallow --depth=1 \
&& ./install.sh \
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# ./docker-compose.yml
みたまんまです
version: "3"
services:
app:
build: .
volumes:
- ./:/app
- /var/run/docker.sock:/var/run/docker.sock
1
2
3
4
5
6
7
2
3
4
5
6
7
# package.json
eslint とか prettier とか typescript とかとか
{
"name": "sample",
"version": "0.1.0",
"scripts": {
"build": "tsc",
"watch": "tsc -w",
"lint": "eslint --ext .ts,.js . --fix"
},
"devDependencies": {
"@types/node": "10.17.27",
"@typescript-eslint/eslint-plugin": "^4.17.0",
"@typescript-eslint/parser": "^4.17.0",
"eslint": "^7.21.0",
"eslint-config-prettier": "^8.1.0",
"eslint-config-prettier-standard": "^4.0.1",
"eslint-config-standard": "^16.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-promise": "^4.3.1",
"prettier": "2.2.1",
"prettier-config-standard": "^4.0.0",
"prettier-standard": "^16.4.1",
"ts-node": "^9.0.0",
"typescript": "~3.9.7"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# .eslintrc.json
eslint のあれです JS Standard 派です中身はお好みで
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"standard",
"prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module"
},
"plugins": ["@typescript-eslint", "prettier"],
"settings": {
"node": {
"tryExtensions": [".ts", ".js", ".json", ".node"]
}
},
"rules": {
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": "error"
}
}ｓ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# .pretttierrc.json
prettier のあれです eslint 同様お好みで
{
"printWidth": 80,
"tabWidth": 2,
"singleQuote": true,
"semi": false,
"trailingComma": "none",
"bracketSpacing": true,
"arrowParens": "avoid"
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# tsconfig.json
tsconfig は正直よくわからんので適当です
{
"compilerOptions": {
"target": "es2020",
"module": "commonjs",
"lib": ["ES2020"],
"strict": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictBindCallApply": true,
"strictPropertyInitialization": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# devcontainer.json
保存時に自動整形が走るようにここで設定しておきます
{
"name": "sample",
"dockerComposeFile": ["../docker-compose.yml", "docker-compose.yml"],
"service": "app",
"workspaceFolder": "/app",
"settings": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editer.tabSize": 2,
"editor.codeActionsOnSave": {
"source.organizeImports": true,
"source.fixAll.eslint": true,
"source.fixAll": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"terminal.integrated.shell.linux": "/bin/zsh"
},
"extensions": [
"visualstudioexptteam.vscodeintellicode",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"donjayamanne.githistory"
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# .devcontainer/docker-compose.yml
まんま
version: "3.4"
services:
app:
volumes:
- .:/app:cached
command: /bin/sh -c "while sleep 1000; do :; done"
1
2
3
4
5
6
2
3
4
5
6
# おわり
VSCode と Typescript との相性の良さや保存時自動整形やらでめちゃくちゃ快適にコードを書けるので満足です
「Docker を使う必要があるんですか???????」とか言われると言い返せない気もするんですが、 気軽にぶっ壊せる環境で開発できるってのも結構ストレスフリーで気に入ってます