Skip to content

Gydunhn/Typescript-Essentials

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

59 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

TypeScript Essentials - Extension Pack for Visual Studio Code

Badge for version for Visual Studio Code extension Installs Downloads Rating

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.

Reasons

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

settings.json

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.

TypeScript TSLint Language Service Plugin

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:

TypeScript Hero

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"

Note

The VSC-Essentials project was used as a template for this one.

Included

This extension pack includes the following extensions:

Extension Stats
TypeScript Hero Badge for version for Visual Studio Code extension Installs Rating
TypeScript Importer Badge for version for Visual Studio Code extension Installs Rating
Javascript-Essentials Badge for version for Visual Studio Code extension Installs Rating