자주 사용하는 Chrome 확장 프로그램이나 VSCode 확장 프로그램 등

크롬 확장 프로그램

pixel perfect
디자인을 겹쳐서 표시할 수 있게 된다.
가끔 디자인과 1px 어긋나 있다고 말하기 때문에

크롬 덤프 확장

북마크

VSCode 확장

setting.json에 추가하는 것이 더 편리하다고 생각했습니다.

"editor.wordWrap": "on", // 行をビューポートの幅で折り返す
"editor.renderWhitespace": "all", // スペースの表示
"editor.minimap.maxColumn": 40, // ミニマップの幅を40文字分に設定する
"editor.wordWrap": "on",// 表示領域の右端で折り返す
"files.trimTrailingWhitespace": true, // 行末のスペースを自動で消す
"files.trimFinalNewlines": true // ファイル末尾の連続した空行を自動で削除
"editor.find.autoFindInSelection": "always", // 範囲選択中はCommand-Fで選択範囲内だけ検索
"editor.codeActionsOnSave": {　// 保存時にESlintで整形
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true,
    "source.fixAll": true
},
"emmet.triggerExpansionOnTab": true, // TAB キーを押したときに Emmet 省略記法が展開
"emmet.includeLanguages": {
    "vue-html": "html"
},
"eslint.enable": true, // ESlint関係
"eslint.debug": true,
"eslint.alwaysShowStatus": true,
"eslint.lintTask.enable": true,
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
"[html]": { // 各言語ごとの設定ができる
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
},
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
},
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}