マック(Mac)の開発環境の構築(2) - tools

2019-05-04

新しマック(Mac)に開発環境を構築してみようかと思います。私がマック(Mac)で使ってる開発ツールを纏めてみました。

概要

マック(Mac)で新しく開発環境を構築しています。このブログでは開発やコミュニケーションで使ってるツールを纏めてみました。

このブログはシリーズです。開発環境の別のところが木になる方は下記の内容を参考してください。

コミュニケーションツール

下記のツールは開発する時使ってるコミュニケーションツールです。

  • Line: App storeからダウンロード
  • Kakaotalk: App storeからダウンロード
  • Slack: App storeからダウンロード

開発ツール

下記は実際開発する時使ってるツールです。

vscode

下記はvscodeで使ってるプラグインのリストです。

  • Active File In StatusBar
  • Babel ES6/ES7
  • Bracket Pair Colorizer
  • Debugger for Chrome
  • IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS
  • Node.js Modlues Intellisense
  • npm Intellisense
  • Path Intellisense
  • PHP Intellisense
  • Prettier - Code Formatter
  • Python
  • Trailing Spaces
  • TSLint
  • vscode-icons
  • vscode-styled-components

上にあるリストを全てインストールした後、下記のコマンドでvscodeの設定ファイルを開きます。

code ~/Library/Application\ Support/Code/User/settings.json

vscodeの設定ファイルに下記の内容をコピペします。

{
  "terminal.integrated.shell.osx": "/bin/zsh",
  "terminal.integrated.fontFamily": "Meslo LG M for Powerline",
  "window.zoomLevel": 2,
  "workbench.iconTheme": "vscode-icons",
  "editor.fontFamily": "'D2Coding ligature'",
  "editor.fontLigatures": true,
  "window.restoreWindows": "all",
  "prettier.eslintIntegration": true,
  "javascript.format.enable": false,
  "editor.formatOnSave": true,
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.DS_Store": true,
    "*/node_modules": true,
    "**/.idea": true,
    "**/.vscode": false,
    "**/yarn.lock": true,
    "**/tmp": true,
    "node_modules": true
  },
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/node_modules/**": true,
    "**/tmp": true,
    "**/build": true
  },
  "files.trimTrailingWhitespace": true,
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/.git": true,
    "**/.DS_Store": true,
    "**/tmp": true,
    "**/coverage": true,
    "**/build": true,
    "**/Pods": true,
    "**/*.xcodeproj": true,
    "**/*.xcworkspace": true,
    "**/.meteor": true
  },
  "extensions.autoUpdate": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5",
  "prettier.jsxBracketSameLine": true,
  "[markdown]": {
    "editor.formatOnSave": false
  }
}

DBツール

下は実際開発に使ってるDBツールです。

デザインツール

デザインツールはSketchappを使っています。

補助プログラム

下記は開発する時使ってる補助プログラムです。

フォント

下記のフォントは開発ツールで使ってるフォントです。

Buy me a coffeeBuy me a coffee
Posts