Improvements to create-svelte (#632)

* Improvements to create-svelte

- add eslint setup option
- add prettier setup option
- introduce type checks to the project

* svelte-adders

* lint

Co-authored-by: Simon Holthausen <simon.holthausen@accso.de>

.changeset/sixty-terms-decide.md

@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+add eslint and prettier setup options

packages/create-svelte/cli/global.d.ts

@@ -0,0 +1,12 @@
+declare module '*.gitignore';
+
+declare module 'gitignore-parser';
+
+declare module 'prompts/lib/index';
+
+declare module 'tiny-glob/sync';
+
+declare module '*.json';
+
+// TODO make this depend on the real types from the kit package
+declare module '@sveltejs/kit/filesystem';

packages/create-svelte/cli/index.js

@@ -11,28 +11,14 @@ import add_css from './modifications/add_css';
 import add_typescript from './modifications/add_typescript';
 // import versions from './versions';
 import { version } from '../package.json';
+import add_prettier from './modifications/add_prettier';
+import add_eslint from './modifications/add_eslint';
 
 const disclaimer = `
-█████████  ███████████    ███████    ███████████  ███
-███░░░░░███░█░░░███░░░█  ███░░░░░███ ░░███░░░░░███░███
-░███    ░░░ ░   ░███  ░  ███     ░░███ ░███    ░███░███
-░░█████████     ░███    ░███      ░███ ░██████████ ░███
-░░░░░░░░███    ░███    ░███      ░███ ░███░░░░░░  ░███
-███    ░███    ░███    ░░███     ███  ░███        ░░░
-░░█████████     █████    ░░░███████░   █████        ███
-░░░░░░░░░     ░░░░░       ░░░░░░░    ░░░░░        ░░░
-
-Pump the brakes! A little disclaimer...
-
-svelte@next is not ready for use yet. It definitely can't
-run your apps, and it might not run at all.
-
-We haven't yet started accepting community contributions,
-and we don't need people to start raising issues yet.
-
-Given these warnings, please feel free to experiment, but
-you're on your own for now. We'll have something to show
-soon.
+Welcome to the SvelteKit setup wizard!
+
+SvelteKit is in public beta now. There are definitely bugs and some feature might not work yet.
+If you encounter an issue, have a look at https://github.com/sveltejs/kit/issues and open a new one, if it is not already tracked.
 `;
 
 async function main() {
@@ -90,6 +76,12 @@ async function main() {
 
 	await prompt_modifications(target);
 
+	console.log(
+		'\nWant to add other parts to your code base? ' +
+			'Visit https://github.com/svelte-add/svelte-adders, a community project of commands ' +
+			'to add particular functionality to Svelte projects\n'
+	);
+
 	console.log('\nNext steps:');
 	let i = 1;
 
@@ -105,6 +97,11 @@ async function main() {
 	console.log('\nStuck? Visit us at https://svelte.dev/chat\n');
 }
 
+/**
+ * Go through the prompts to let the user setup his project.
+ *
+ * @param {string} target
+ */
 async function prompt_modifications(target) {
 	const ts_response = await prompts({
 		type: 'confirm',
@@ -125,6 +122,22 @@ async function prompt_modifications(target) {
 		]
 	});
 	await add_css(target, css_response.value);
+
+	const eslint_response = await prompts({
+		type: 'confirm',
+		name: 'value',
+		message: 'Add ESLint for code linting?',
+		initial: false
+	});
+	await add_eslint(target, eslint_response.value, ts_response.value);
+
+	const prettier_response = await prompts({
+		type: 'confirm',
+		name: 'value',
+		message: 'Add Prettier for code formatting?',
+		initial: false
+	});
+	await add_prettier(target, prettier_response.value, eslint_response.value);
 }
 
 main();

packages/create-svelte/cli/modifications/add_css.js

@@ -1,11 +1,21 @@
 import { bold, green } from 'kleur/colors';
-import { add_svelte_preprocess_to_config, update_component, update_package_json } from './utils';
+import {
+	add_svelte_preprocess_to_config,
+	update_component,
+	update_package_json_dev_deps
+} from './utils';
 
+/**
+ * Add chosen CSS language to the project.
+ *
+ * @param {string} cwd
+ * @param {'css' | 'scss' | 'less'} which
+ */
 export default async function add_css(cwd, which) {
 	if (which === 'css') {
 		console.log('You can add support for CSS preprocessors like SCSS/Less/PostCSS later.');
 	} else if (which === 'less') {
-		update_package_json(cwd, {
+		update_package_json_dev_deps(cwd, {
 			less: '^3.0.0',
 			'svelte-preprocess': '^4.0.0'
 		});
@@ -21,7 +31,7 @@ export default async function add_css(cwd, which) {
 			)
 		);
 	} else if (which === 'scss') {
-		update_package_json(cwd, {
+		update_package_json_dev_deps(cwd, {
 			sass: '^1.0.0',
 			'svelte-preprocess': '^4.0.0'
 		});

packages/create-svelte/cli/modifications/add_eslint.js

@@ -0,0 +1,48 @@
+import { bold, green } from 'kleur/colors';
+import {
+	copy_from_template_additions,
+	update_package_json_dev_deps,
+	upsert_package_json_scripts
+} from './utils';
+
+/**
+ * Add ESLint if user wants it.
+ *
+ * @param {string} cwd
+ * @param {boolean} yes
+ * @param {boolean} use_typescript
+ */
+export default async function add_eslint(cwd, yes, use_typescript) {
+	if (!yes) {
+		return;
+	}
+
+	upsert_package_json_scripts(cwd, {
+		lint: 'eslint .'
+	});
+
+	if (use_typescript) {
+		update_package_json_dev_deps(cwd, {
+			'@typescript-eslint/eslint-plugin': '^4.19.0',
+			'@typescript-eslint/parser': '^4.19.0',
+			eslint: '^7.22.0',
+			'eslint-plugin-svelte3': '^3.1.0'
+		});
+		copy_from_template_additions(cwd, { from: ['.eslintrc.ts.cjs'], to: ['.eslintrc.cjs'] });
+	} else {
+		update_package_json_dev_deps(cwd, {
+			eslint: '^7.22.0',
+			'eslint-plugin-svelte3': '^3.1.0'
+		});
+		copy_from_template_additions(cwd, ['.eslintrc.cjs']);
+	}
+
+	console.log(
+		bold(
+			green(
+				'✔ Added ESLint.\n' +
+					'Readme for ESLint and Svelte: https://github.com/sveltejs/eslint-plugin-svelte3'
+			)
+		)
+	);
+}

packages/create-svelte/cli/modifications/add_prettier.js

@@ -0,0 +1,67 @@
+import fs from 'fs';
+import { bold, green } from 'kleur/colors';
+import { join } from 'path';
+import {
+	copy_from_template_additions,
+	update_package_json_dev_deps,
+	upsert_package_json_scripts
+} from './utils';
+
+/**
+ * Add TypeScript if user wants it.
+ *
+ * @param {string} cwd
+ * @param {boolean} yes
+ * @param {boolean} usesEslint
+ */
+export default async function add_prettier(cwd, yes, usesEslint) {
+	if (!yes) {
+		return;
+	}
+
+	update_package_json_dev_deps(cwd, {
+		prettier: '~2.2.1',
+		'prettier-plugin-svelte': '^2.2.0'
+	});
+	copy_from_template_additions(cwd, ['.prettierrc']);
+	copy_from_template_additions(cwd, ['.prettierignore']);
+
+	if (usesEslint) {
+		update_package_json_dev_deps(cwd, {
+			'eslint-config-prettier': '^8.1.0'
+		});
+		add_prettier_to_eslint_extends(cwd);
+		upsert_package_json_scripts(cwd, {
+			lint: 'prettier --check . && eslint .',
+			format: 'prettier --write .'
+		});
+	} else {
+		upsert_package_json_scripts(cwd, {
+			lint: 'prettier --check .',
+			format: 'prettier --write .'
+		});
+	}
+
+	console.log(
+		bold(
+			green(
+				'✔ Added Prettier.\n' +
+					'General formatting options: https://prettier.io/docs/en/options.html\n' +
+					'Svelte-specific formatting options: https://github.com/sveltejs/prettier-plugin-svelte#options'
+			)
+		)
+	);
+}
+
+/**
+ * @param {string} cwd
+ */
+function add_prettier_to_eslint_extends(cwd) {
+	const file = join(cwd, '.eslintrc.cjs');
+	let code = fs.readFileSync(file, 'utf-8');
+
+	const insertIdx = code.indexOf(']', code.indexOf('extends: ['));
+	code = code.substring(0, insertIdx) + ", 'prettier'" + code.substring(insertIdx);
+
+	fs.writeFileSync(file, code, 'utf-8');
+}

packages/create-svelte/cli/modifications/add_typescript.js

@@ -1,11 +1,22 @@
 import fs from 'fs';
 import { bold, green } from 'kleur/colors';
 import { join } from 'path';
-import { add_svelte_preprocess_to_config, update_component, update_package_json } from './utils';
+import {
+	add_svelte_preprocess_to_config,
+	copy_from_template_additions,
+	update_component,
+	update_package_json_dev_deps
+} from './utils';
 
+/**
+ * Add TypeScript if user wants it.
+ *
+ * @param {string} cwd
+ * @param {boolean} yes
+ */
 export default async function add_typescript(cwd, yes) {
 	if (yes) {
-		update_package_json(cwd, {
+		update_package_json_dev_deps(cwd, {
 			typescript: '^4.0.0',
 			tslib: '^2.0.0',
 			'svelte-preprocess': '^4.0.0'
@@ -31,11 +42,10 @@ export default async function add_typescript(cwd, yes) {
 	}
 }
 
+/**
+ * @param {string} cwd
+ */
 function add_tsconfig(cwd) {
 	fs.unlinkSync(join(cwd, 'jsconfig.json'));
-	copy_from_ts_template(cwd, 'tsconfig.json');
-}
-
-function copy_from_ts_template(cwd, ...path) {
-	fs.copyFileSync(join(__dirname, 'ts-template', ...path), join(cwd, ...path));
+	copy_from_template_additions(cwd, ['tsconfig.json']);
 }