eslint 와 Prettier 설정에 대한 내용입니다.
npm install eslint babel-eslint prettier --save-dev
npm install eslint-plugin-prettier eslint-config-prettier --save-dev
npm install eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev
npm install husky lint-staged --save-dev
Package.json 에 추가
"lint-staged": {
"*.js": ["eslint . --fix", "prettier --write"]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
.eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'airbnb',
'prettier',
'prettier/react',
'plugin:prettier/recommended',
'eslint-config-prettier',
],
parser: 'babel-eslint',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'script',
},
rules: {
'import/no-unresolved': 'off',
'react/jsx-filename-extension': [
1,
{
extensions: ['.js', '.jsx'],
},
],
'prettier/prettier': [
'error',
{
trailingComma: 'es5',
singleQuote: true,
printWidth: 100,
},
],
},
plugins: ['prettier'],
};vscode 설정
좌측 하단에 톱니바퀴 모양을 눌러 settings
Edit in settings.jso
settings.json
{
"editor.tabSize": 2,
// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
"editor.formatOnSave": true
},
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true
},
"prettier.eslintIntegration": true
}.prettierrc
{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80
}추가로
사용하는 Package.json, vsCode/settings.json, .eslintrc.js, prettierrc.js 을 따로 첨부해서 나중에 사용해야겠네요. ^^;
{
"name": "SomeAppName",
"version": "0.0.1",
"private": true,
"lint-staged": {
"*.js": [
"eslint . --fix",
"prettier --write"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/bottom-tabs": "^5.11.8",
"@react-navigation/drawer": "^5.12.4",
"@react-navigation/material-top-tabs": "^5.3.14",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "0.63.4",
"react-native-gesture-handler": "1.10.3",
"react-native-reanimated": "2.0.0",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "2.18.1",
"react-native-tab-view": "2.15.2",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"styled-components": "^5.2.0"
},
"devDependencies": {
"@babel/core": "7.13.8",
"@babel/runtime": "7.13.9",
"@react-native-community/eslint-config": "2.0.0",
"babel-jest": "26.6.3",
"eslint": "7.21.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-prettier": "6.15.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-prettier": "3.1.2",
"eslint-plugin-react": "7.22.0",
"husky": "5.1.3",
"jest": "26.6.3",
"lint-staged": "10.5.4",
"metro-react-native-babel-preset": "0.65.2",
"react-test-renderer": "16.13.1"
},
"jest": {
"preset": "react-native"
}
}
settings.json
{
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"workbench.iconTheme": "vscode-icons",
"editor.tabSize": 2,
"eslint.workingDirectories": [
],
"prettier.tabWidth": 2,
"prettier.eslintIntegration": true,
// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
// For ESLint
"source.fixAll.eslint": true
},
"eslint.alwaysShowStatus": true,
//"prettier.disableLanguages": ["js"],
//"files.autoSave": "onFocusChange",
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 300000,
"bracket-pair-colorizer-2.activeScopeCSS": [
"borderStyle : solid",
"borderWidth : 1px",
"borderColor : {color}",
"opacity: 0.5"
],
"editor.multiCursorModifier": "ctrlCmd",
}.eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'airbnb',
'prettier',
'prettier/react',
'plugin:prettier/recommended',
'eslint-config-prettier',
],
'no-use-before-define': ['error', { variables: false }],
parser: 'babel-eslint',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
rules: {
'import/no-unresolved': 'off',
'react/jsx-filename-extension': [
1,
{
extensions: ['.js', '.jsx'],
},
],
'prettier/prettier': [
'error',
{
trailingComma: 'es5',
singleQuote: true,
printWidth: 100,
},
],
},
plugins: ['prettier'],
};
.prettierrc.js
module.exports = {
bracketSpacing: true,
jsxBracketSameLine: true,
singleQuote: true,
trailingComma: 'all',
semi: true,
useTabs: false,
tabWidth: 2,
printWidth: 80,
};
행복한 고수되셔요.
woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형
'MOBILE > React Native' 카테고리의 다른 글
| [React Native] React Navigation V5 (0) | 2021.02.27 |
|---|---|
| [React Native] The Configuration For React Native Development (2) | 2021.02.20 |
