Add VS Code workspace settings (#67798)

* Remove .vscode from .gitignore

* Add recommended extensions

* Add basic workspace settings

* Remove unnecessary setting

* Use settings sample instead of settings

* Update settings-sample.jsonc

* Create setup vs code script

* Wire up setup vs code script

* Fix symlink errors on Windows

* Remove vscode:link from postinstall script

.gitignore

@@ -6,7 +6,7 @@
 .env
 .DS_Store
 .idea
-.vscode
+.vscode/settings.json
 .nova
 *.code-workspace
 *.iml

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+	"recommendations": [
+		"dbaeumer.vscode-eslint",
+		"esbenp.prettier-vscode",
+		"stylelint.vscode-stylelint"
+	]
+}

.vscode/settings-sample.jsonc

@@ -0,0 +1,44 @@
+{
+	// File settings
+	"files.eol": "\n",
+	"files.exclude": {
+		"**/node_modules": true,
+		".cache": true
+	},
+	"files.associations": {
+		// VS Code treats ".prettierrc" as JSON, by default
+		".prettierrc": "yaml"
+	},
+	// Editor settings
+	"editor.formatOnSave": false,
+	"editor.codeActionsOnSave": {
+		"source.fixAll": true
+	},
+	// Use prettier for formatting JS/TS
+	"[javascript][javascriptreact][typescript][typescriptreact]": {
+		// auto format on save will be done by ESLint
+		"editor.formatOnSave": false,
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[jsonc][json][yaml][markdown]": {
+		"editor.formatOnSave": true,
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	// Use stylint for formatting CSS/SCSS
+	"[css][scss][sass]": {
+		"editor.formatOnSave": false,
+		"editor.defaultFormatter": "stylelint.vscode-stylelint"
+	},
+	// Settings for extensions
+	"eslint.validate": [
+		"javascript",
+		"javascriptreact",
+		"typescript",
+		"typescriptreact",
+		"json",
+		"jsonc"
+	],
+	"stylelint.validate": [ "css", "scss", "sass" ],
+	// Use the installed version of TypeScript, not the ones bundled with VS Code
+	"typescript.tsdk": "node_modules/typescript/lib"
+}

bin/set-up-vs-code.js

@@ -0,0 +1,87 @@
+#!/usr/bin/env node
+// @ts-check
+
+/**
+ * Links or unlinks `.vscode/settings-sample.jsonc` to `.vscode/settings.json`.
+ *
+ * Usage:
+ * To link, run `node bin/set-up-vs-code.js`
+ * To unlink, run `node bin/set-up-vs-code.js --unlink`
+ */
+
+const fs = require( 'fs' );
+const path = require( 'path' );
+const chalk = require( 'chalk' );
+const yargs = require( 'yargs' );
+
+const settingsPath = path.resolve( __dirname, '../.vscode/settings.json' );
+const settingsSamplePath = path.resolve( __dirname, '../.vscode/settings-sample.jsonc' );
+
+const stat = fs.lstatSync( settingsPath, { throwIfNoEntry: false } );
+
+function symlinkExists() {
+	return stat && stat.isSymbolicLink();
+}
+
+function fileExists() {
+	return stat && stat.isFile();
+}
+
+function link() {
+	if ( symlinkExists() ) {
+		console.log( `Symlink for .vscode/settings.json already exists. ✅\n` );
+		return;
+	}
+	if ( fileExists() ) {
+		console.log(
+			chalk.yellow(
+				`Warning: Cannot create a symlink for .vscode/settings.json as the file already exists.\n`
+			)
+		);
+		console.log(
+			`You may delete .vscode/settings.json or if you wish to maintain it yourself, please copy the contents of .vscode/settings-sample.jsonc to .vscode/settings.json and make your changes.\n`
+		);
+		return;
+	}
+	try {
+		fs.symlinkSync( settingsSamplePath, settingsPath, 'junction' );
+		console.log( chalk.green( `Successfully created a symlink for .vscode/settings.json ✅\n` ) );
+	} catch ( error ) {
+		console.log( chalk.red( 'Error creating a symlink for .vscode/settings.json' ), error, `\n` );
+	}
+}
+
+function unlink() {
+	if ( fileExists() ) {
+		console.log(
+			chalk.yellow(
+				`Warning: Cannot remove symlink for .vscode/settings.json as it is a file and not a symlink.\n`
+			)
+		);
+		console.log(
+			`If you do NOT want to manage .vscode/settings.json yourself, you can delete it and run\n\nyarn vscode:link\n`
+		);
+		return;
+	}
+
+	if ( symlinkExists() ) {
+		try {
+			fs.unlinkSync( settingsPath );
+			console.log( chalk.green( `Removed symlink for .vscode/settings.json ✅\n` ) );
+		} catch ( error ) {
+			console.error(
+				chalk.red( 'Failed to remove symlink for .vscode/settings.json' ),
+				error,
+				`\n`
+			);
+		}
+	} else {
+		console.log( `No symlink exists for .vscode/settings.json\n` );
+	}
+}
+
+if ( yargs.argv.unlink ) {
+	unlink();
+} else {
+	link();
+}

package.json

@@ -127,6 +127,8 @@
 		"tsc": "NODE_OPTIONS='--max-old-space-size=4096' tsc",
 		"typecheck": "yarn run tsc --project client",
 		"update-deps": "rm -rf yarn.lock && yarn run distclean && PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true yarn install && replace --silent 'http://' 'https://' . --recursive --include='yarn.lock' && touch -m node_modules",
+		"vscode:link": "node bin/set-up-vs-code.js",
+		"vscode:unlink": "node bin/set-up-vs-code.js --unlink",
 		"whybundled": "NODE_ENV=production CALYPSO_ENV=production EMIT_STATS=withreasons CONCATENATE_MODULES=false yarn run build-client && whybundled client/stats.json",
 		"whybundled:server": "NODE_ENV=production CALYPSO_ENV=production EMIT_STATS=withreasons CONCATENATE_MODULES=false yarn run build-server && whybundled client/stats-server.json"
 	},