Development Environment on Mac(2) - for tools

2019-05-04

now I'm configuring the development environment on new Mac. in here, I'll introduce the tools that I use when I develop.

Outline

now I’m setting the development environment on new Mac. in this blog, I’ll show the tools what I use.

this blog is a series. if you want to know other development environment, see other blog posts.

Communication Tools

the below is what I use for communication when I develop.

  • Line: Download from App store
  • Kakaotalk: Download from App store
  • Slack: Download from App store

Development Tools

the below is the development tools what I use.

vscode

this is vscode plugin list what I use.

  • 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

after installing all, execute the command below to open vscode configuration file.

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

copy-paste the below to vscode setting file.

{
  "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 Tools

the below is the DB tools what I use.

Design Tool

I use the sketchapp for design.

Support Program

this is the support programs for developing.

Font

this is the font for the development tools.

Buy me a coffeeBuy me a coffee
Posts