Dec 8, 2020

5 min read

How to use aliases in VSCode extension development

  1. Typescript compilation
  2. Webpack packaging
  3. Test build
  1. tsconfig.json
  2. webpack.config.js
  3. package.json — well, that’s where you can put the initial alias configuration.
npm i — save-dev module-alias @types/module-alias
tsconfig.json
webpack.config.js
package.json
package.json
“@src/*”: “src/*”
“@languageServer”: “src/lib/languageServer”
const tsconfigContent = require('./tsconfig.json');const alias = {}Object.entries(tsconfigContent.compilerOptions.paths).forEach(
([aliasName, [ aliasContent ]]) => {
const name = aliasName.replace('/*', '');
const aliasPath = path.resolve(
root,
'out',
aliasContent.replace('/*', '')
);
alias[name] = aliasPath;
}
)
webpack.config.js
import * as moduleAlias from 'module-alias';
import * as path from 'path';
const tsconfigContent = require('../../tsconfig.json');
const paths = tsconfigContent.compilerOptions.paths;
const extensionRoot = path.resolve(__dirname, '..', '..');
Object.entries(paths).forEach(
([aliasName, aliasContentList]: [string, unknown]) => {
const [aliasContent] = aliasContentList as string[];
const name = aliasName.replace('/*', '');
const aliasPath = path.resolve(
extensionRoot,
'out',
aliasContent.replace('/*', '')
);
moduleAlias.addAlias(name, aliasPath);
}
);
“@src/*”: “src/*”
“@src”: “out/src”