프로젝트 작성 방법 및 자동 성형 lint 설정 방법 - vue ui 사용

전제

node.js 8.9 이상이 설치되어 있습니다

node의 버전 지정이 되어 있는 것

(node ​​-v를 치면 v8.12.0 등으로 나오면 ok)

상기를 모르는 경우
-> node.js의 설치 방법 등은 여기

vue cli 사용 가능 (설치하지 않은 경우)

npm으로 설치하는 경우

$ npm install -g @vue/cli

yarn으로 설치하는 경우

$ yarn global add @vue/cli

(이것은 한 번하면 괜찮습니다)
버전을 올릴 때는 upgrade

$ yarn upgrade @vue/cli

vue-cli로 프로젝트 만들기

vue ui에서 프로젝트를 만드는 방법

$ vue ui  (vue create)

에서 GUI에서 vue-cli가 일어난다.


Home(Vue Project Manager)에서 만들기를 누릅니다.



다음


세부 설정.
간단하게 설정하는 경우는 디폴트라도 좋지만, 이번은 수동을 선택.


ON으로 하면 기능 추가되게 된다.


CSS 전처리기 선택 및 Lint 설정.

끝나면 "프로젝트 만들기"를 누릅니다.

콘솔이 움직일 것 같아서


나오면 성공.

저장할 때 마음대로 lint --fix 설정

vue.config.js를 만듭니다.

vue.config.js

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('eslint')
      .use('eslint-loader')
      .options({
        fix: true,
      })
  },
}

고급 설정
package.json 또는 .eslintrc.js로 설정.

package.json

    "rules": {
      "no-console": 0,
      "prettier/prettier": [
        "error",
        {
          "semi": false,
          "trailingComma": "all",
          "singleQuote": true
        }
      ]
    },

"no-console"=> 0 으로 하면, console.log 의 사용을 허가하는 설정이 된다.

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/variables.scss";`
      }
    }
  }
}

css를 자동으로 로드하는 설정도 추가할 수 있다.
htps : // cぃ. 아 js. rg/구이데/css. html
참고

주의

eslint-loader의 버전에 따라 lint가 움직이지 않는 경우가 있다.
이 경우 eslint-loader 버전을 변경하십시오.
yarn.lock 파일의 eslint-loader@^2.0.0: 항목을 모두 삭제

yarn.lock

eslint-loader@^2.0.0:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-2.1.1.tgz*****
  integrity *****
  dependencies:
    loader-fs-cache "^1.0.0"
    loader-utils "^1.0.2"
    object-assign "^4.0.1"
    object-hash "^1.1.4"
    rimraf "^2.6.1"

"@vue/cli-plugin-eslint@^3.0.5": eslint-loader "^2.0.0"
yarn.lock

"@vue/cli-plugin-eslint@^3.0.4":
  version "3.0.5"
  resolved "https://registry.yarnpkg.com/@vue/cli-plugin-eslint/-/cli-plugin-eslint-3.0.5.tgz#******"
  integrity sha512*****
  dependencies:
    "@vue/cli-shared-utils" "^3.0.5"
    babel-eslint "^8.2.5"
    eslint "^4.19.1"
-   eslint-loader "^2.0.0"   //ここの行を書き換え  
+   eslint-loader "2.1.0"
    eslint-plugin-vue "^4.5.0"

$ yarn

실행 후

yarn.lock

[email protected]:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-2.1.0.tgz#*****"
  integrity sha*******
  dependencies:
    loader-fs-cache "^1.0.0"
    loader-utils "^1.0.2"
    object-assign "^4.0.1"
    object-hash "^1.1.4"
    rimraf "^2.6.1"

되면 ok.