sveltejs/template

Provide easy path to eslint?

mrienstra opened this issue · 1 comments

I gather from #49 that adding a default .eslintrc.js is a non-starter.

What about using a script instead? Maybe two scripts, with and without TypeScript support.

Here is a rough POC that uses sveltejs/eslint-config:

// @ts-check

/** This script adds an .eslintrc.js file and sveltejs/eslint-config as a dev dependency
  */

const fs = require("fs")
const path = require("path")
const { argv } = require("process")

const projectRoot = argv[2] || path.join(__dirname, "..")

const esLintRcJs = `module.exports = {
	root: true,
	extends: '@sveltejs',
	settings: {
		'import/core-modules': [
			'svelte',
			'svelte/animate',
			'svelte/easing',
			'svelte/internal',
			'svelte/motion',
			'svelte/store',
			'svelte/transition'
		],
		'svelte3/compiler': require('./compiler')
	}
};
`;

// Write .eslintrc
fs.writeFileSync(path.join(projectRoot, ".eslintrc.js"), esLintRcJs)

// Add dep to pkg.json
const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8"))
packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
  "@sveltejs/eslint-config": "github:sveltejs/eslint-config"
})

// Write the package JSON
fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, "  "))

// Delete this script, but not during testing
if (!argv[2]) {
  // Remove the script
  fs.unlinkSync(path.join(__filename))

  // Check for Mac's DS_store file, and if it's the only one left remove it
  const remainingFiles = fs.readdirSync(path.join(__dirname))
  if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
    fs.unlinkSync(path.join(__dirname, '.DS_store'))
  }

  // Check if the scripts folder is empty
  if (fs.readdirSync(path.join(__dirname)).length === 0) {
    // Remove the scripts folder
    fs.rmdirSync(path.join(__dirname))
  }
}

// Adds the extension recommendation
fs.mkdirSync(path.join(projectRoot, ".vscode"), { recursive: true })
fs.writeFileSync(path.join(projectRoot, ".vscode", "extensions.json"), `{
  "recommendations": ["svelte.svelte-vscode"]
}
`)

console.log("Added .eslintrc.js")

if (fs.existsSync(path.join(projectRoot, "node_modules"))) {
  console.log("\nYou will need to re-run your dependency manager to get started.")
}

Seems like eslint-plugin-svelte3 is more popular than sveltejs/eslint-config, happy to throw together a similar script for that instead.

Thoughts?

As part of the setup script in https://github.com/sveltejs/kit/tree/master/packages/create-svelte for SvelteKit apps, there is already the option for configuring ESLint when starting a new project. The sveltejs/template repo is going to be deprecated and archived once things settle down and SvelteKit comes out of beta and becomes the suggested way to build all Svelte apps. We're not quite there yet, but at this point, we'd still rather be directing energy and new work at SvelteKit than at this repo.

eslint-plugin-svelte3 and sveltejs/eslint-config serve different purposes, by the way. The formar is the official ESLint plugin for Svelte, and the latter is shared ESLint configuration to use internally in various repos in this GitHub organization.