[Vscode, nuxt3] prettier, volar formatting

---

1. vetur을 깔면 루트 폴더 - 서브 폴더 구조에서 vue를 못찾는 것 같음

2. vetur을 확장프로그램에서 지우고, 대신 volar를 설치함

3. nuxt3 포맷팅을 위해서 eslint, prettier를 설치함

https://velog.io/@korjsh/vue.js-vscode-eslint-prettier-%EC%84%A4%EC%A0%95 

vue.js vscode eslint & prettier 설정

https://www.inflearn.com/questions/626182/nuxt-3-%EC%97%90%EC%84%9C-eslint-prettier-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95

Nuxt 3 에서 eslint, prettier 사용 방법 - 인프런 | 질문 & 답변

https://dev.to/tao/adding-eslint-and-prettier-to-nuxt-3-2023-5bg

Adding ESLint and Prettier to Nuxt 3 ✨ (2023)

설정은 위 블로그들을 참고하였음

나의 경우, 오픈소스 프로젝트를 가져온 거라 .eslintrc.js가 없어서 front가 nuxt 프로젝트이기 때문에 front 폴더에 .eslintrc.js를 생성함

그리고 vue3는 설정에서 Eslint: Validate를 찾아서 settings.json을 수정하라고 했는데...내가 찾아본 nuxt3는 아래를 수정하라는 말이 없어서 안함..

 

- vscode의 settings.json

{
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "terminal.integrated.fontFamily": "CaskaydiaCove NF",
  "python.formatting.provider": "black", // black 확장프로그램 설치
  "editor.linkedEditing": true,
  "editor.wordWrap": "on",
  "editor.largeFileOptimizations": false,
  "editor.unicodeHighlight.nonBasicASCII": false,
  "workbench.sideBar.location": "right",
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
  "editor.formatOnSave": true, // => 저장시 자동 수정
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 프리티어사용
  "python.defaultInterpreterPath": "파이썬 경로", 
  "jupyter.jupyterInterruptTimeout": 100000,
  "security.workspace.trust.untrustedFiles": "open",
  "jupyter.jupyterServerType": "local",
  "git.autofetch": true,
  "files.autoSave": "afterDelay",
  "notebook.lineNumbers": "on",
  "editor.inlineSuggest.enabled": true,
  "github.copilot.enable": {
    "*": true,
    "yaml": true,
    "plaintext": false,
    "markdown": true
  },
  "workbench.colorTheme": "GitHub Light Colorblind (Beta)",
  "files.maxMemoryForLargeFilesMB": 8192,
  "workbench.editorAssociations": {
    "*.csv": "gc-excelviewer-csv-editor",
    "*.json": "default"
  },
  "[python]": {
    "editor.defaultFormatter": "ms-python.python"
  },
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar" // volar를 사용
  },
  "jupyter.interactiveWindow.textEditor.executeSelection": true,
  "debug.javascript.unmapMissingSources": true,
  "eslint.validate": [], //따로 수정을 안함...해야하는걸까?
  "files.associations": {
    "*.vue": "vue"
  }
}

- yarn install을 위한 package.json

eslint와 관련된 package 추가해줌

 

  "devDependencies": {
    "@kevinmarrec/nuxt-pwa": "^0.17.0",
    "@nuxtjs/color-mode": "^3.2.0",
    "@nuxtjs/i18n": "^8.0.0-beta.9",
    "@types/webpack": "^5.28.1",
    "material-design-icons-iconfont": "^6.7.0",
    "nuxt": "^3.3.3",
    "vuepress": "^2.0.0-beta.61",
    "eslint": "^8.23.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-nuxt": "^3.2.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.4.0",
    "prettier": "^2.7.1",
    "vite-plugin-eslint": "^1.8.1"
  },

dependencies와 devDependencies의 차이

https://jieum.tistory.com/202

의존성 - dependencies와 devDependencies의 차이

 

- nuxt의  nuxt.config.ts

추가하라해서 추가해봄..

import eslintPlugin from 'vite-plugin-eslint'
vite: {
		plugins: [eslintPlugin()],
	}

- nuxt 프로젝트가 있는 폴더에서 .eslintrc.js 없으면 생성

//https://www.inflearn.com/questions/626182/nuxt-3-%EC%97%90%EC%84%9C-eslint-prettier-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95
module.exports = {
	root: true,
	env: {
		browser: true,
		node: true,
	},
	extends: ['eslint:recommended', 'plugin:nuxt/recommended', 'plugin:vue/vue3-recommended', 'plugin:prettier/recommended'],
	rules: {
		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'no-debug': process.env.NODE_ENV === 'production' ? 'error' : 'off',
		'no-unused-vars': 'off',
		'prettier/prettier': [
			'error',
			{
				singleQuote: true,
				semi: true,
				useTabs: true,
				tabWidth: 4,
				trailingComma: 'all',
				printWidth: 160,
				bracketSpacing: true,
				arrowParens: 'avoid',
				endOfLine: 'auto',
			},
		],
	},
};

=> 근데 오류 너무많이나서 걍..eslint관련 다 지움

 

.lock 파일을 지우고 다시 설치

https://umanking.github.io/2022/05/05/yarn-lock/

yarn.lock 파일(잠금파일)은 무엇이고 어떤 기능을 하는가?

 

그냥 volar랑 prettier가 vscode의 settings.json에 잘 되어있는지 확인하고 마무리함