2

Подскажите, пожалуйста, как настроить phpStrom с typeScript, что бы он правильно давал подсказки у автокомплита?

Я включил typescript и добавил в файлах с расширением *.vue. И создаю компоненты через Vue.extend(), как и написано в документации. И всё работает и собирается и типы выводятся. Но в phpStorm выводит типы не всегда верно, он не понимает, this функции может поменяется, и меняется в компонентах vue.

Т.е. если есть компонента в файле .vue:

 Vue.extend({
  props['test'],
  mounted(){
   this.test
  }
})

Тo phpStorm подчеркнёт this.test как ошибка т.к. по его мнению в this есть только mounted и props, а test нету, он не понимает, что у метода mounted, при добавление в Vue, this будет изменён.

В тоже время если я напишу тоже самое в файле с расширением *.ts то phpStorm всё правильно подскажет.

webpack в обоих случаях всё верно собирает, и правильно выводить ошибки typeScript, проблема только с phpStorm...

Подскажите, пожалуйста, как это можно поправить?

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "noImplicitThis": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    'eslint-config-airbnb',
    '@vue/eslint-config-typescript',
    'plugin:vue/recommended',
  ],
  plugins: [
    'vue',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-param-reassign': ["off", { "props": false }],
    semi: ['error', 'never'],
    'max-len': ['off', 100, 2, {
      ignoreUrls: true,
      ignoreComments: true,
      ignoreRegExpLiterals: true,
      ignoreStrings: true,
      ignoreTemplateLiterals: true,
    }],
    'no-shadow': ["error", { "allow": ["state"] }],
    'import/no-unresolved': ['off'],
    'singleQuote': true,
    'quotes': ['warn', 'single', { avoidEscape: true }],
    'import/extensions': ['error', 'always', {
      js: 'never',
    }],
  },
  parserOptions: {
    parser: 'typescript-eslint-parser',
  },
};
4
  • Хороший вопрос. Я пытался его разрешить для себя, однако забил в какой то момент и вообще отключил подсветку ошибок Typescript убрав в настройках галочу.
    – zalex
    8 фев 2019 в 10:32
  • Убрать подсветку, это вариант. Но просто хочется, что бы phpStorm правильно всё подсказывал и делал автодополнение правильно, с этим намного удобнее работать. И самое интересно, что в файлах с расширением *.ts где только JavaScript компоненты, он всё это делает. Понять бы как научить его делать тоже самое в теге <script> файла *.vue, и жизнь стала бы намного счастливей....
    – vvtvvtvvt1
    8 фев 2019 в 10:48
  • Кстати говоря... попробуйте указать в компоненте <script lang="ts"> в js секции , phpstorm совершенно точно на это реагирует.
    – zalex
    8 фев 2019 в 10:58
  • Да, у меня и так это и стоит, без этого он вообще typeScript не понимает. Это само собой, с ним он начинает его понимать, и выводить типы, но this выводит не правильно. Т.е. так то правильно, но без учёта Vue.extent.
    – vvtvvtvvt1
    8 фев 2019 в 12:11

1 ответ 1

1
  1. WebStorm в данный момент не поддерживает работу с компонентами, созданными через Vue.extend - см. WEB-31721, WEB-35714. Я бы рекомендовала использовать синтаксис vue-class-component - см. https://ru.vuejs.org/v2/guide/typescript.html#%D0%9A%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B-Vue-%D0%BD%D0%B0-%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%B5-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%BE%D0%B2

  2. начиная с 2019.1 (пока доступна только бета версия), для подсветки typescript в <script lang="ts"> можно использовать Typescript compiler service (https://blog.jetbrains.com/webstorm/2019/01/webstorm-2019-1-early-access-preview/#better_support_for_vue_projects_with_typescript). Это поможет избавиться от некоторых сообщений об ошибках - но для того, чтобы все работало корректно, все равно нужна специальная поддержка синтаксиса Vue.extend

4
  • Понятно, спасибо. Жаль что шторм только сейчас начинает это поддерживать. Дело вкуса, но мне синтаксис с классами не очень нравиться, по этому пытаюсь найти спасибо обойтись без него.
    – vvtvvtvvt1
    8 фев 2019 в 15:30
  • А не знаете можно ли как то скачать пробную версию phpStorm 2019.1 с официально сайта? (Просто в рзаделе скачать он предлагает Version: 2018.3.4)
    – vvtvvtvvt1
    8 фев 2019 в 15:59
  • попробуйте jetbrains.com/phpstorm/eap
    – lena
    8 фев 2019 в 16:23
  • Спасибо. Скачал.
    – vvtvvtvvt1
    8 фев 2019 в 16:40

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.