nuxt 프로젝트에 ESLint 도입
전제
[Qiita] Nuxt.js + TypeScript + Sass + ESLint 시작하기
Install and Set up
install Package
yarn add -D babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier
.eslintrc.js 만들기
프로젝트의 루트에 추가
.eslintrc.jsmodule.exports = {
root: true,
env: {
browser: true,
node: true,
mocha:true,
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
"eslint:recommended",
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// より厳しいルールにするには`plugin:vue/strongly-recommended` もしくは `plugin:vue/recommended` に切り替えることを検討してください。
"plugin:vue/recommended",
"plugin:prettier/recommended"
],
// *.vue ファイルを lint にかけるために必要
plugins: [
'vue'
],
// ここにカスタムルールを追加します。
rules: {
"semi": [2, "never"],
"no-console": "off",
"vue/max-attributes-per-line": "off",
"prettier/prettier": ["error", { "semi": false }]
}
}
package.json에 명령 추가
package.json"scripts": {
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
}
lint, lintfix 실행 테스트
>yarn run lint
1501 problems가 발견된 것 같습니다.
>yarn run lintfix
소스가 많이 수정되어 83 problems만 남았습니다
체크를 비활성화하는 방법
한 줄만 비활성화
// eslint-disable-line
여러 줄 무효
/* eslint-disable */
/* eslint-enable */
Reference
이 문제에 관하여(nuxt 프로젝트에 ESLint 도입), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ta1nakamura/items/a7fa31f9cc7f34d20895
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
yarn add -D babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier
module.exports = {
root: true,
env: {
browser: true,
node: true,
mocha:true,
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
"eslint:recommended",
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// より厳しいルールにするには`plugin:vue/strongly-recommended` もしくは `plugin:vue/recommended` に切り替えることを検討してください。
"plugin:vue/recommended",
"plugin:prettier/recommended"
],
// *.vue ファイルを lint にかけるために必要
plugins: [
'vue'
],
// ここにカスタムルールを追加します。
rules: {
"semi": [2, "never"],
"no-console": "off",
"vue/max-attributes-per-line": "off",
"prettier/prettier": ["error", { "semi": false }]
}
}
"scripts": {
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
}
한 줄만 비활성화
// eslint-disable-line
여러 줄 무효
/* eslint-disable */
/* eslint-enable */
Reference
이 문제에 관하여(nuxt 프로젝트에 ESLint 도입), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ta1nakamura/items/a7fa31f9cc7f34d20895텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)