Skip to main content

IDEでフロントエンドのみを開く場合に開発者エクスペリエンスを向上させる

このTipは@kaidohallikにより提出されました

少なくともVisual Studio Codeでは、次の動作が発生します。

フルスタックアプリケーション（サーバーやクライアントをスキップしない）を生成し、フロントエンド開発者ができるだけ少ないファイルを表示し、IDEでフォルダsrc/main/webapp/appのみを開く場合、IDEはappで始まるインポートを認識しません。これらのインポートは赤で表示され、開発者はインポートされたクラスの内容を見ることができず、ワンクリックでこれらのインポートされたクラスにジャンプできません。パスappは、生成されたアプリケーションのルートフォルダにあるtsconfig.jsonファイルに定義されているため、一部のサブフォルダを開くと、この情報が失われます。

可能な解決策1​

次の内容のファイルsrc/main/webapp/app/tsconfig.jsonを追加します。

{
    "extends": "../../../../tsconfig.json"
}

テストの場合は、同じ内容のファイルsrc/test/javascript/spec/tsconfig.jsonを追加します。

{
    "extends": "../../../../tsconfig.json"
}

その後、Visual Studio Codeでフォルダsrc/main/webapp/appまたはsrc/test/javascript/specのみを開く場合、パスappを解決できます。

可能な解決策2​

  • インポートエイリアスを相対パスに置き換えるノードスクリプトremove-import-alias.jsをアプリケーションルートフォルダに追加します。
const fs = require('fs');

removeImportAlias = function(dir, level, additionalPath) {
  fs.readdirSync(dir).forEach(function(file) {
    if (fs.statSync(dir + file).isDirectory()) {
      removeImportAlias(dir + file + '/', level + 1, additionalPath);
    } else if (file.endsWith('.ts')) {
      fs.readFile(dir + file, 'utf8', function (err, content) {
        if (err) {
          console.log(err);
        } else {
          let path = '../'.repeat(level);
          if (additionalPath) {
            path += additionalPath;
          }
          if (!path) {
            path = './';
          }
          const newContent = content.replace(/import \{ (.*) \} from 'app\/(.*)';/g, `import { $1 } from '${path}$2';`);
          fs.writeFile(dir + file, newContent, 'utf8', function (err) {
            if (err) {
              console.log(err);
            }
          });
        }
      });
    }
  });
};

removeImportAlias(`./src/main/webapp/app/`, 0);
removeImportAlias(`./src/test/javascript/spec/`, 0, '../../../main/webapp/app/');

  • remove-import-alias.jsを.eslintignoreに追加します。

  • 追加されたスクリプトnode remove-import-alias.jsを実行します。

  • tsconfig.jsonファイルのcompilerOptions.pathsセクションからapp/*を削除してください。