This extension pack for Visual Studio Code adds extensions that are useful for TypeScript projects. I reserve the right to update the extensions pack contents up to my own discretion. This extension is for my personal use, I think it's great if it works for other people too.
The TypeScript Essentials extension pack was made to automate and standardize the installation phase of the essential TypeScript extensions for Visual Studio Code every time a new member joins the team, or one of them restores a laptop, or exchanges it for a new one.
See the CHANGELOG for the latest changes
It is strongly recommended that these settings be used in your workspace. You must copy and paste them, and if you need to adjust something you will already know where to do it.
{
/**
* JavaScript Essentials Config
*/
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"javascript.format.enable": true,
"javascript.format.semicolons": "insert",
"javascript.preferences.quoteStyle": "single",
"eslint.enable": true,
"eslint.codeAction.showDocumentation": {
"enable": true
},
"eslint.codeAction.disableRuleComment": {
"enable": true,
"location": "sameLine"
},
"npm-intellisense.importES6": true,
"npm-intellisense.importQuotes": "'",
"npm-intellisense.importLinebreak": ";\r\n",
"npm-intellisense.importDeclarationType": "const",
/**
* The following line is for the specific configuration of the
* Path-Intellisense extension over Javascript
*/
"javascript.suggest.paths": false,
"path-intellisense.showHiddenFiles": true,
"formattingToggle.affects": [
"editor.formatOnPaste",
"editor.formatOnType"
],
/**
* TypeScript Essentials Config
*/
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"typescript.format.enable": true,
"typescript.format.semicolons": "insert",
"typescript.preferences.quoteStyle": "single",
/**
* The following line is for the specific configuration of the
* Path-Intellisense extension over Typescript
*/
"typescript.suggest.paths": false,
}
If you are using the VSC-Essentials extension pack additionally, you can see the complete settings file here (settings.json)
Consider that if you would rather use ESLint as the default code formatter, rather than the one that comes with VSCode, you will need to change this settings in your settings.json file:
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
For this others:
"[javascript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
},
As far as using the Debugger for Firefox entails, I highly recommend reading its documentation in order to get a full debugging experience.
the TSLint extension used to be part of this extension pack until it was deprecated. If you search the marketplace, it is still there if you need it, But in most cases what is recommended is to migrate to ESlint, which supports the same functionality. There is a diverse range of documentation of interest about the process, so I will leave below what I think is the most convenient:
- tslint-to-eslint-config, Converts your TSLint configuration to the closest reasonable ESLint equivalent.
- Migrate from TSLint to ESLint, TSLint has been the recommended linter in the past but now TSLint is deprecated and ESLint is taking over its duties. This article will help you migrate from TSLint to ESLint.
- typescript-eslint, The tooling that enables ESLint and Prettier to support TypeScript.
- TSLint GitHub, the original TSLint repository, from Palantir Technologies.
Several developers have been asking me why do I still use "TypeScript Hero" when it is no longer being maintained?, and my answer is always the same: "to date we have not had any problems with this extension, and it continues to do its job, and we have not yet found a replacement that has the same functionalities"
The VSC-Essentials project was used as a template for this one.
This extension pack includes the following extensions:
Extension | Stats |
---|---|
TypeScript Hero | |
TypeScript Importer | |
Javascript-Essentials |