Как настроить Phpstorm, чтобы он распознавал псевдонимы (alias) для Vite.js и SCSS?

Как установить алиасы для SCSS и Vue файлов в сборке Vue3 + Vite, чтобы PHPStorm видел их?
Изображение к вопросу
Изображение к вопросу
  • 19 октября 2023 г. 17:49
Ответы на вопрос 3
Для того чтобы Phpstorm распознавал алиасы для Vite.js и SCSS, вам понадобится настроить соответствующие пути.

Для настройки алиасов в Vite.js вы можете создать файл `tsconfig.json` в корне проекта и добавить следующую конфигурацию:

```json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
```

В данном примере создается алиас `"@/*"`, который соответствует папке `src/*`. Вы можете добавить дополнительные алиасы по вашему усмотрению. Затем вам необходимо перезапустить Phpstorm, чтобы он распознал эти алиасы.

Для настройки алиасов в SCSS, вам потребуется файл `webpack.config.js`, который включает ваш проект Vue3 + Vite. В данном файле вам нужно добавить путь для алиаса `@`, который будет указывать на корневую папку проекта. Пример:

```javascript
const path = require('path');

module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  // ...
};
```

После настройки этих алиасов, Phpstorm должен правильно распознавать пути и алиасы в файлах Vue и SCSS. Вы можете использовать их, например, при импорте компонентов или стилей.
Попробуй изменить файл jsconfig.json таким образом: 
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~admin/*": [
        "resources/area/admin/vue3/*"
      ]
    }
  }
}
Похожие вопросы