Meteor + Vue + Typescript 프로젝트에 ESLint 추가

Meteor + Vue + Typescript 프로젝트에 ESLint 추가

Meteor, Vue, Typescript와 더 예쁜 ESLint를 설정하는 데 어려움을 겪고 있습니다.Typescript 파일을 정상적으로 해석 및 포맷할 수 있지만, 이 파일은 에러를 발생시키고 있습니다..vue파일을 표시합니다.

ESLint 관련 의존관계

"@babel/plugin-transform-typescript": "^7.12.1",
"@meteorjs/eslint-config-meteor": "^1.0.5",
"@types/meteor": "^1.4.64",
"@types/mocha": "^8.0.3",
"@typescript-eslint/eslint-plugin": "^4.22.0",
"@typescript-eslint/parser": "^4.22.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-vue-typescript-eslint": "^1.1.7",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.9.0",

.eslinrc.displays

module.exports = {
    root: true,
    env: {
        node: true,
        webextensions: true
    },
    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
    parserOptions: {
        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
        sourceType: 'module', // Allows for the use of imports
        ecmaFeatures: {
            jsx: true // Allows for the parsing of JSX
        }
    },
    settings: {
        vue: {
            version: 'detect' // Tells eslint-plugin-vue to automatically detect the version of Vue to use
        }
    },
    extends: [
        'plugin:vue/recommended',
        'eslint:recommended',
        'vue-typescript-eslint',
        'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
        'plugin:prettier/recommended' // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
    ],
    rules: {
        // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
        // e.g. "@typescript-eslint/explicit-function-return-type": "off",
        'no-unused-vars': 'warn'
    }
};

.pretierrc.display

module.exports = {
    semi: true,
    trailingComma: "all",
    singleQuote: true,
    printWidth: 120,
    tabWidth: 4
};

Sample Page Content(샘플 페이지 내용).표시하다

<template>
  <v-row>
    <h4>Sample page content</h4>
  </v-row>
</template>

<script lang="ts">

import Vue from "vue";

export default Vue.extend( {
  components: {},
  props: {
    giftList: {
      type: Object
    }
  },
});
</script>

<style scoped>
</style>

나는 그것을 받았다.ESLint: Parsing error: '}' expected.에서 일어나다components부분.

파일을 해석/포맷하려면 어떻게 해야 하나요?.vue파일이 맞습니까?

업데이트 - 셋업 정보

프로젝트 초기 셋업에 사용한 명령어를 나타내는 질문입니다.https://forums.meteor.com/t/creating-a-meteor-vue-typescript-project-that-uses-class-style-components/55778

meteor create --vue gift-list-app
meteor add typescript
meteor npm install --save-dev @types/meteor
meteor add nathantreid:vue-typescript-babel
meteor npm install --save-dev @babel/plugin-transform-typescript

누락된 경우 이러한 Dev 종속성을 추가합니다.

"devDependencies": {
    "@babel/plugin-transform-typescript": "^7.12.1",
    "@types/meteor": "^1.4.67",
    "@babel/core": "^7.4.4",
    "@babel/plugin-syntax-decorators": "^7.2.0",
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@babel/preset-typescript": "^7.3.3",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0"
}

여기 a가 있습니다.Meteor + Vue + Typescript내가 만든 프로젝트의 예시.여기에 ESLint를 올바르게 추가할 수 있다면 완벽할 것입니다.

https://github.com/Michael2109/meteor-vue-typescript-example

다음 부분에 대해서는 [1]의 튜토리얼을 따릅니다.

1. VSCode용 ESLint 및 Figter 확장 버전을 다운로드하십시오.
2. ESLint 및 예쁜 라이브러리를 프로젝트에 설치합니다.프로젝트의 루트 디렉토리에서 npm install -D eslint pretty 를 실행합니다.
3. eslint-config-pretier 설치(ESLint 포맷 비활성화) 및 eslint-plugin-pretier 설치(ESLint 입력 시 포맷 오류 표시 가능)npm 설치 -D eslint-config-pretier eslint-plugin-pretier
4. 마지막 단계는 저장할 때 더 예쁜 형식을 확인하는 것입니다."editor"를 삽입합니다.formatOnSave": VSCode의 사용자 설정에 적용됩니다.

또, Eslint를 글로벌하게 Ubuntu에 인스톨 해, 질문에 기재되어 있는 dev-deps를 적용했습니다.또한 VSCode에 Vetur 플러그인을 추가하고 VSCode를 최신 버전으로 업데이트했습니다.

앳.eslint.js파일:

  parserOptions: {
      ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
      sourceType: 'module', // Allows for the use of imports
      extraFileExtensions: ['.vue'], // ADDED
      ecmaFeatures: {
          jsx: true // Allows for the parsing of JSX
      }
  },

VSCode Settings.json에서 얻은 내용은 다음과 같습니다.

  {
    "editor.formatOnSave": true,
    "eslint.alwaysShowStatus": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  }

모든 것이 작동하기 직전에 VS Code에서 일부 파일에서는 보풀이 활성화되지 않는다는 질문을 받았습니다."do that for all files" (모든 파일에 대해 실행)로 활성화했더니 보풀 경고가 정상적으로 표시된다.

여기서 모든 걸 말하려고 했지만, 100%가 통했다고 말할 수는 없어요.

부인

왜 colly bracket 문제가 컨스트럭터의 컴포넌트 부분에 있는지 확인할 수 없었습니다.버그로 취급하고 있습니다만, 코드와 보풀이 어느 쪽인지 알 수 없습니다.기타 문제에 대하여prettier 것을 내다esLint이치노그렇다고는 해도, 이 정도면 충분히 대답할 수 있다고 생각합니다.

편집:

당신은 WebStorm에서 Eslint를 사용한다고 말했습니다.관련 플러그인을 추가한 후 활성화할 수 있는 설정 [2]이 있습니다.

• 에서 ESLint를 하려면 []대화상자 [Settings/Preferences]를.Ctrl+Alt+S 접속하다Languages and Frameworks | JavaScript | Code Quality Tools | ESLint 을 합니다.Automatic ESLint configuration★★★★★★ 。

• 에서 ESLint를 하려면 []대화상자Settings for New Projects])를.상자(((((((( （ ）File | New Projects Settings | Settings for New Projects합니다.Languages and Frameworks | JavaScript | Code Quality Tools | ESLint 을 합니다.Automatic ESLint configuration★★★★★★ 。

저장 시 자동 수정 방법:

• / ] [Settings / Preferences]를.Ctrl+Alt+S 접속하다Languages and Frameworks | JavaScript | Code Quality Tools | ESLint 을 합니다.Run eslint --fix on save체크박스를 켜겠습니다.

내 정보원 [2]에는 다른 것도 있지만, 적어도 눈에 보이는 방법으로, 이러한 것들이 "작동할 수 있도록" 합니다.

출처:

[1] ESLint + Pretty + Airbnb 규칙 + TypeScript + Vetur를 사용하여 Vue CLI 4를 설정하는 방법

[2] https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_eslint_verify_code

언급URL : https://stackoverflow.com/questions/67253953/add-eslint-to-a-meteor-vue-typescript-project