Setup linting & formatting tooling (#1)

* Install prettier/eslint

* Add editorconfig file

* Fix package versions

* Configure eslint/prettier

* Update nuxt

* Setup linting workflow

* Remove codeql

* Setup engines

* Fix linter warnings

.editorconfig

@@ -0,0 +1,11 @@
+root=true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = tab
+trim_trailing_whitespace = true
+
+[*.{yml,yaml}]
+indent_style = space

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.eslintrc.js

@@ -0,0 +1,93 @@
+const defaultRules = {
+	// No console statements in production
+	'no-console': process.env.NODE_ENV !== 'development' ? 'error' : 'off',
+	// No debugger statements in production
+	'no-debugger': process.env.NODE_ENV !== 'development' ? 'error' : 'off',
+	// Enforce prettier formatting
+	'prettier/prettier': 'error',
+	'padding-line-between-statements': [
+		'error',
+		{
+			blankLine: 'always',
+			prev: [
+				'block',
+				'block-like',
+				'cjs-export',
+				'class',
+				'export',
+				'import',
+				'multiline-block-like',
+				'multiline-const',
+				'multiline-expression',
+				'multiline-let',
+				'multiline-var',
+			],
+			next: '*',
+		},
+		{
+			blankLine: 'always',
+			prev: ['const', 'let'],
+			next: ['block', 'block-like', 'cjs-export', 'class', 'export', 'import'],
+		},
+		{
+			blankLine: 'always',
+			prev: '*',
+			next: ['multiline-block-like', 'multiline-const', 'multiline-expression', 'multiline-let', 'multiline-var'],
+		},
+		{ blankLine: 'any', prev: ['export', 'import'], next: ['export', 'import'] },
+	],
+	'lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: true }],
+	'no-nested-ternary': 'error',
+	curly: ['error', 'multi-line'],
+};
+
+module.exports = {
+	// Stop looking for ESLint configurations in parent folders
+	root: true,
+	// Global variables: Browser and Node.js
+	env: {
+		browser: true,
+		node: true,
+	},
+	// Basic configuration for js files
+	plugins: ['@typescript-eslint', 'prettier'],
+	extends: ['eslint:recommended', 'prettier'],
+	rules: defaultRules,
+	parserOptions: {
+		ecmaVersion: 2022,
+		sourceType: 'module',
+	},
+	overrides: [
+		// Configuration for ts/vue files
+		{
+			files: ['*.ts', '*.vue'],
+			parser: 'vue-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser',
+			},
+			extends: [
+				'plugin:vue/vue3-recommended',
+				'eslint:recommended',
+				'plugin:@typescript-eslint/recommended',
+				'prettier',
+			],
+			rules: {
+				...defaultRules,
+				'vue/multi-word-component-names': 'off',
+				'vue/require-default-prop': 'off',
+				// It's recommended to turn off this rule on TypeScript projects
+				'no-undef': 'off',
+				// Allow ts-directive comments (used to suppress TypeScript compiler errors)
+				'@typescript-eslint/ban-ts-comment': 'off',
+				// Allow usage of the any type (consider to enable this rule later on)
+				'@typescript-eslint/no-explicit-any': 'off',
+				// Allow usage of require statements (consider to enable this rule later on)
+				'@typescript-eslint/no-var-requires': 'off',
+				// Allow non-null assertions for now (consider to enable this rule later on)
+				'@typescript-eslint/no-non-null-assertion': 'off',
+				// Allow unused arguments and variables when they begin with an underscore
+				'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+			},
+		},
+	],
+};

.github/actions/prepare/action.yml

@@ -0,0 +1,39 @@
+name: Prepare
+description: Install and build the app
+inputs:
+  registry:
+    description: NPM registry to set up for auth
+    required: false
+
+runs:
+  using: 'composite'
+  steps:
+    - name: Install Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: 18
+        registry-url: ${{ inputs.registry }}
+
+    - uses: pnpm/action-setup@v2
+      name: Install pnpm
+      id: pnpm-install
+      with:
+        run_install: false
+
+    - name: Get pnpm store directory
+      id: pnpm-cache
+      shell: bash
+      run: |
+        echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+    - uses: actions/cache@v3
+      name: Setup pnpm cache
+      with:
+        path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: Install dependencies
+      shell: bash
+      run: pnpm install

.github/workflows/lint.yaml

@@ -0,0 +1,30 @@
+name: Check
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: check-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  NODE_OPTIONS: --max_old_space_size=6144
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Prepare
+        uses: ./.github/actions/prepare
+
+      - name: Run Linter
+        run: pnpm lint

.prettierignore

@@ -0,0 +1,4 @@
+dist
+coverage
+node_modules
+pnpm-lock.yaml

.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+	htmlWhitespaceSensitivity: 'ignore',
+	printWidth: 120,
+	singleQuote: true,
+	proseWrap: 'always',
+};

app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
-    <NuxtWelcome />
-  </div>
+	<div>
+		<NuxtWelcome />
+	</div>
 </template>

nuxt.config.ts

@@ -1,4 +1,4 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  devtools: { enabled: true }
-})
+	devtools: { enabled: true },
+});

package.json

@@ -1,16 +1,30 @@
 {
-    "name": "website",
-    "private": true,
-    "scripts": {
-        "build": "nuxt build",
-        "dev": "nuxt dev",
-        "generate": "nuxt generate",
-        "preview": "nuxt preview",
-        "postinstall": "nuxt prepare"
-    },
-    "devDependencies": {
-        "@nuxt/devtools": "latest",
-        "@types/node": "^18",
-        "nuxt": "^3.5.2"
-    }
+	"name": "@directus/website",
+	"private": true,
+	"scripts": {
+		"build": "nuxt build",
+		"dev": "nuxt dev",
+		"generate": "nuxt generate",
+		"preview": "nuxt preview",
+		"postinstall": "nuxt prepare",
+		"lint": "eslint .",
+		"format": "prettier --write \"**/*.{md,y?(a)ml,json,vue}\""
+	},
+	"devDependencies": {
+		"@nuxt/devtools": "latest",
+		"@types/node": "20.2.5",
+		"@typescript-eslint/eslint-plugin": "5.59.9",
+		"@typescript-eslint/parser": "5.59.9",
+		"eslint": "8.42.0",
+		"eslint-config-prettier": "8.8.0",
+		"eslint-plugin-prettier": "4.2.1",
+		"eslint-plugin-vue": "9.14.1",
+		"nuxt": "3.5.2",
+		"prettier": "2.8.8"
+	},
+	"packageManager": "pnpm@8.6.0",
+	"engines": {
+		"node": ">=18.0.0",
+		"pnpm": "~8.6.0"
+	}
 }