코딩/VSCode

.prettierrc, .eslintrc 줄바꿈 변경

춘 몽 2024. 4. 24. 12:42

nest하는데 줄 바뀌면 코드 지저분해지고 한줄로 보는게 깔끔해 보이는 코드가 줄바꿈 되어서 변경방법을 좀 알아보았다.

 

(nest 기본 설정 파일 기준)

- .prettierrc 코드 변경 => printWidth가 추가 되었다. (printWidth 작성하면 80뜨는게 기본이 80인듯)

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 90
}

 

이렇게 하면 줄은 안바뀌는데 줄 안바뀐 코드에 대해서 빨간줄 떠있다. 그 이유는 .eslintrc 설정에서 충돌이 나기 때문..

 

- .eslintrc 코드 변경 => extends 에서 prettier/recommended 코드를 삭제하는 방법도 있으나 어떤 오류를 만날지 모르니..

   rule에 prettier에서 설정한것과 같은 값 넣어주기

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-unused-vars': 'warn',
    'prettier/prettier': ['error', { printWidth: 90 }],
  },
};

 

이러면 다른 파일들에 빨간불이 들어올 수 있는데 해당 파일은 전의 규칙으로 적용되었던 줄바꿈으로 인해 빨간줄이 나있는거다.

가서 저장한번씩 눌러주면 자동으로 새로운 줄바꿈으로 변경되고 빨간불도 사라진다.

'코딩 > VSCode' 카테고리의 다른 글

ESLint 빨간줄 => 노란줄 or 특정 기능 끄기  (0) 2024.03.18
설정 통일시켜주기  (0) 2024.03.16
VSCode 단축키  (0) 2024.03.01
VS Code 모듈 추천  (0) 2024.02.24
VS Code 초기 설정  (0) 2024.02.07