WebStorm 설정

2020-08-05

coding, config, develop, jetbrains, webstorm

webstorm

WebStorm 설정하기

첫 설치
단축키 셋팅
Prettier 셋팅
테마셋팅
버벅거림 셋팅
웹스톰 처음으로 초기화하기

첫 설치

Material Theme 만 설치

( 그리고 cmd + , - Plugins 에서 Material Theme 비활성화, 테마 자체는 Dark Purple Theme를 사용.

테마에 있는 몇몇기능 때문에 설치. )

단축키 셋팅

탭 셋팅

shift 2번 - Editor Tabs

Close All : cmd + shift + W
Split and Move Right : control + option + .
Unsplit : control + option + ,
Move To Opposite Group : shift + control + .

Editor - General - Editor Tabs

Mark modified (*) 체크

JavaScript

cmd + , - Editor - Live Templates - JavaScript

Abberviation	Description	Define
cl	console.log()	JavaScript & TypeScript

1	console.log($ITEM$)

Edit Template Variables : 미설정

CSS

cmd + , - Editor - Live Templates - +버튼 - Templete Group - CSS입력

Abberviation	Description	Define
rscss	Reset CSS	CSS

/* ::-moz-selection {
  background: #0288d1;
  color: #ffffff;
}
::selection {
  background: #0288d1;
  color: #ffffff;
} */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: 0em;
  text-decoration: inherit;
  color: inherit;
  vertical-align: top;
  outline: none;
}
a,
address,
area,
article,
aside,
audio,
b,
body,
br,
button,
canvas,
caption,
cite,
code,
col,
colgroup,
dd,
del,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
frame,
frameset,
h1,
h2,
h3,
h4,
h5,
h6,
head,
header,
hr,
html,
i,
iframe,
img,
ins,
input,
label,
legend,
li,
link,
map,
meta,
nav,
object,
ol,
p,
pre,
q,
rp,
rt,
ruby,
s,
script,
section,
select,
source,
span,
strong,
style,
sub,
summary,
sup,
table,
tbody,
td,
textarea,
tfoot,
th,
thead,
time,
title,
tr,
u,
ul,
video {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  text-decoration: inherit;
  color: inherit;
  vertical-align: top;
  outline: none;
}
html {
  width: 100%;
  height: 100%;
  font-weight: 300;
  font-size: 10px;
  line-height: 1.2;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  /* -webkit-overflow-scrolling: touch; */
}
body {
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
  color: #222;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(31, 26, 26, 0);
  -webkit-text-size-adjust: 100%;
  -webkit-print-color-adjust: exact;
}
ul,
ol,
li {
  list-style: none;
}
img,
hr {
  border: none;
}
p {
  max-height: 999999px;
}
table {
  max-width: 100%;
  border-spacing: 0;
  table-layout: fixed;
}
th,
td {
  vertical-align: middle;
}
select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: none;
  -webkit-border-radius: 0;
}
select::-ms-expand {
  display: none;
}
::-webkit-input-placeholder {
  color: #777777;
}
::-moz-placeholder {
  color: #777777;
}
:-ms-input-placeholder {
  color: #777777;
}
:-moz-placeholder {
  color: #777777;
}
input[type='text'] {
  border-radius: 0;
}
button,
input[type='file'],
input[type='image'],
input[type='reset'],
input[type='button'],
input[type='submit'] {
  border: 1px solid #eee;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border-radius: none;
}
label {
  cursor: pointer;
}
fieldset,
iframe {
  border: none;
}
sup,
sub {
  line-height: 1;
}
a:link {
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: none;
  color: inherit;
}
a:visited {
  text-decoration: none;
  color: inherit;
}
a:active {
  text-decoration: none;
  color: inherit;
}
a:focus {
  text-decoration: none;
  color: inherit;
}
@media all and (max-width: 768px) {
  html {
    font-size: 8px;
  }
}

Edit Template Variables : 미설정

React

cmd + , - Editor - Live Templates - React

Abberviation	Description	Define
tsc	Typescript React Class	JavaScript & TypeScript

import React, { Component } from 'react'

interface Props {
  
}
interface State {
  
}

export default class $TM_FILENAME_BASE$ extends Component<Props, State> {
  state = {}

  render() {
    return (
      <div>
        $END$
      </div>
    )
  }
}

Edit Template Variables

Name	Expression	Default value
TM_FILENAME_BASE	capitalize(camelCase(fileNameWithoutExtension()))	“”

Abberviation	Description	Define
tscc	Typescript React Route Class	JavaScript & TypeScript

import React from 'react';
import { RouteComponentProps } from 'react-router';
interface IState {
$END$
}
interface IProps extends RouteComponentProps {
$END$
}
export class $TM_FILENAME_BASE$ extends React.Component<IProps, IState> {
  state: IState;
  constructor(props: IProps) {
    super(props);
    this.state = {
    }
  }
  render() {
    return {};
  }
  componentDidMount(): void {}
  componentWillUpdate(nextProps: Readonly<IProps>, nextContext: any): void {}
  componentWillUnmount(): void {}
}
// mobx
// export default inject('')(observer($TM_FILENAME_BASE$));

Edit Template Variables

Name	Expression	Default value
TM_FILENAME_BASE	capitalize(camelCase(fileNameWithoutExtension()))	“”

Abberviation	Description	Define
tsf	Typescript React Function	JavaScript & TypeScript

import React, { useEffect } from 'react'

export interface $TM_FILENAME_BASE$Props {}

const $TM_FILENAME_BASE$: React.FC<$TM_FILENAME_BASE$Props> = ({ children }) => {
  return <div>$END$</div>;
}

export default $TM_FILENAME_BASE$;

Edit Template Variables

Name	Expression	Default value
TM_FILENAME_BASE	capitalize(camelCase(fileNameWithoutExtension()))	“”

Abberviation	Description	Define
tsfc	Typescript React Route Function	JavaScript & TypeScript

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
// import { observer } from 'mobx-react';
interface RouteParams {
  $END$
}
interface IProps {
  $END$
}
export const $TM_FILENAME_BASE$: React.FC<RouteComponentProps<RouteParams> & IProps> = () => {
  return (
    <>
    </>
  );
};
// mobx
// export default observer($TM_FILENAME_BASE$);

Edit Template Variables

Name	Expression	Default value
TM_FILENAME_BASE	capitalize(camelCase(fileNameWithoutExtension()))	“”

Abberviation	Description	Define
tss	Typescript React Styled Component	JavaScript & TypeScript

import React, { useEffect } from 'react';
import styled from 'styled-components';
export interface $TM_FILENAME_BASE$Props {
  $END$
}
const $TM_FILENAME_BASE$Styled = styled.div.attrs({})<$TM_FILENAME_BASE$Props>``;
const $TM_FILENAME_BASE$: React.SFC<$TM_FILENAME_BASE$Props> = ({ children }) => {
  return <$TM_FILENAME_BASE$Styled></$TM_FILENAME_BASE$Styled>;
}
export default $TM_FILENAME_BASE$;

Edit Template Variables

Name	Expression	Default value
TM_FILENAME_BASE	capitalize(camelCase(fileNameWithoutExtension()))	“”

Abberviation	Description	Define
tssmq	Typescript Styled-Component Mediq Query	JavaScript & TypeScript

import { css } from 'styled-components';
const sizes = {
  desktop: 1025,
  tablet: 1024,
  mobile: 768,
};
const sizeCheck = (label: string) => {
  if (label === 'desktop') return `all and (min-width: ${sizes[label]}px)`;
  if (label === 'tablet')
    return `all and (min-width: ${+sizes['mobile'] + 1}px) and (max-width: ${
      sizes[label]
    }px)`;
  if (label === 'mobile') return `all and (max-width: ${sizes[label]}px)`;
};
const media = Object.keys(sizes).reduce((points: any, label) => {
  points[label] = (literals: TemplateStringsArray, ...args: any[]) => css`
    @media ${sizeCheck(label)} {
      ${css(literals, ...args)}
    }
  `;
  return points;
}, {} as Record<keyof typeof sizes, (literals: TemplateStringsArray, ...args: any[]) => string>);
export default media;import { css } from 'styled-components';
const sizes = {
  desktop: 1025,
  tablet: 1024,
  mobile: 768,
};
const sizeCheck = (label: string) => {
  if (label === 'desktop') return `all and (min-width: ${sizes[label]}px)`;
  if (label === 'tablet')
    return `all and (min-width: ${+sizes['mobile'] + 1}px) and (max-width: ${
      sizes[label]
    }px)`;
  if (label === 'mobile') return `all and (max-width: ${sizes[label]}px)`;
};
const media = Object.keys(sizes).reduce((points: any, label) => {
  points[label] = (literals: TemplateStringsArray, ...args: any[]) => css`
    @media ${sizeCheck(label)} {
      ${css(literals, ...args)}
    }
  `;
  return points;
}, {} as Record<keyof typeof sizes, (literals: TemplateStringsArray, ...args: any[]) => string>);
export default media;

Edit Template Variables : 미설정

프리티어 셋팅

cmd + , - Plugins - Prettier 설치 확인

cmd + , - Languages & Frameworks - JavaScript - Prettier

Run on save for files : 체크

패턴 : {*/,*}.{js,ts,jsx,tsx,css,scss,sass}

위 셋팅으로 `cmd + s` 시 프리티어가 미적용될 경우, 파일 워처 설정해야함.

cmd + , - Tools - File Watchers - + 버튼 누르고

JS , JSX , TS , TSX , CSS , SASS , SCSS 전부 프리티어 만들고 적용.

플러그인 셋팅

Nyan Progress Bar
React Snippets
Styled Components & Styled JSX
Rainbow Brackets
Material Theme UI 또는 Dark Purple Theme
Atom Material Icons
Quick Notes

Material Theme 설치 시 설정

control + ~ - Material Theme UI

위 버튼이 안먹을 경우

View - Quick Switch Schema- Material Theme UI

버벅거림 설정

shift 2번 - memoryIndicator 검색 - 설정
Help - Edit Custom VM Options
-Xms128m 를 -Xms512m 로 변경 (컴퓨터 사양따라 조절)
-Xmx750m 를 -Xmx4096m 로 변경 (컴퓨터 사양따라 조절)

아래 두줄 추가

1 2	-Dawt.useSystemAAFontSettings=lcd -Dawt.java2d.opengl=true

재시작

웹스톰 처음으로 초기화하기

shift 2번 - Restore the default WebStorm settings 검색

HYEOK999's Daily Develop

DevelopTips

WebStorm 설정

WebStorm 설정하기

첫 설치

단축키 셋팅

탭 셋팅

JavaScript

CSS

React

프리티어 셋팅

위 셋팅으로 `cmd + s` 시 프리티어가 미적용될 경우, 파일 워처 설정해야함.

플러그인 셋팅

Material Theme 설치 시 설정

버벅거림 설정

웹스톰 처음으로 초기화하기

DevelopTips

WebStorm 설정하기

첫 설치

단축키 셋팅

탭 셋팅

JavaScript

CSS

React

프리티어 셋팅

위 셋팅으로 cmd + s 시 프리티어가 미적용될 경우, 파일 워처 설정해야함.

플러그인 셋팅

Material Theme 설치 시 설정

버벅거림 설정

웹스톰 처음으로 초기화하기

위 셋팅으로 `cmd + s` 시 프리티어가 미적용될 경우, 파일 워처 설정해야함.