nodejs 프로젝트 생성 : typescript, eslint, prettier 설정

** nodejs 프로젝트 생성시 typescript 적용

 

1. nodejs 프로젝트 생성

mkdir projectName

cd projectName

npm init -y

npm i -D typescript ts-node nodemon

npx tsc --init

 

2. tsconfig.json 파일에 다음 내용 설정

{

...

"target": "es6",

"module": "commonjs",

"outDir": "./dist",

"rootDir": "./src",

"strict": true,

"moduleResolution": "node",

"esModuleInterop": true,

...

}

 

3. 프로젝트 루트에 dist와 src 폴더를 생성하고 src에 index.ts 파일 생성

 

4. packagejson에 다음 내용 설정

{

...

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node dist/index.js",
"build": "tsc -p .",
"dev": "nodemon --watch \"src/**/*.ts\" --exec \"ts-node\" src/index.ts"
},

...

}

 

5. eslint, prettier 설치 

npm install --save --dev eslint prettier eslint-config-prettier eslint-plugin-import eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

 

6. .eslintrc.js 설정파일 프로젝트 루트에 생성 (없는경우 생성, 있으면 내용 확인)

module.exports = {
	env: {
		browser: true,
		es2021: true,
		node: true,
	},
	extends: [
		'eslint:recommended',
		'plugin:react/recommended',
		'plugin:@typescript-eslint/recommended',
	],
	parser: '@typescript-eslint/parser',
	parserOptions: {
	ecmaFeatures: {
		jsx: true,
	},
	ecmaVersion: 12,
	sourceType: 'module',
	},
	plugins: ['react', '@typescript-eslint'],
	rules: {
		'@typescript-eslint/no-inferrable-types': 'warn',
		'@typescript-eslint/no-explicit-any': 'off',
		'@typescript-eslint/no-empty-function': 'warn',
		'prefer-const': 'warn',
		'no-empty': 'warn',
		'no-unexpected-multiline': 'warn',
		'no-useless-escape': 'warn',
		'no-inner-declarations': 'warn',
		'no-unsafe-finally': 'warn',
		'no-constant-condition': 'warn',
		'no-var': 'warn',
		'no-case-declarations': 'warn',
		'@typescript-eslint/no-var-requires': 'warn',
	},
};

 

7. prettierrc.js 설정파일 프로젝트 루트에 생성 (없는경우 생성, 있으면 내용 확인)

module.exports = {
	arrowParens: "avoid",
	bracketSpacing: true,
	endOfLine: "auto",
	htmlWhitespaceSensitivity: "css",
	jsxBracketSameLine: false,
	jsxSingleQuote: false,
	printWidth: 80,
	proseWrap: "preserve",
	quoteProps: "as-needed",
	semi: true,
	singleQuote: true,
	tabWidth: 4,
	trailingComma: "all",
	useTabs: false,
};

 

---

 

* 개발서버 스타트

npm run dev

 

* 프로젝트 빌드

npm run build

 - 빌드된 파일들은 (*.js) "dist/" 디렉토리 아래에 생성

 

끝.