Add prettier and run prettier command via lint-staged (digitalocean#448)

Author: maskeynihal

.eslintrc.cjs

@@ -1,41 +1,44 @@
 module.exports = {
-  env: {
-    'browser': true,
-    'node': true,
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:vue/recommended',
-  ],
-  parserOptions: {
-    parser: '@babel/eslint-parser',
-    ecmaVersion: 2018,
-    sourceType: 'module',
-    requireConfigFile: false,
-  },
-  rules: {
-    'linebreak-style': ['error', 'unix'],
-    semi: ['error', 'always'],
-    quotes: ['error', 'single'],
-    'comma-dangle': ['error', 'always-multiline'],
-    'vue/require-v-for-key': 0,
-    'vue/require-default-prop': 0,
-    'vue/no-v-html': 0,
-    'vue/max-attributes-per-line': 0,
-    'vue/html-indent': ['error', 4],
-    'vue/script-indent': ['error', 4, {
-      baseIndent: 1,
-    }],
-    'vue/no-unused-vars': 0,
-    'vue/html-self-closing': 0,
-    'vue/multi-word-component-names': 0,
-    'vue/no-reserved-component-names': 0,
-    'eol-last': ['error', 'always'],
-  },
-  globals: {
-    'describe': true,
-    'expect': true,
-    'it': true,
-    'test': true,
-  },
+    env: {
+        browser: true,
+        node: true,
+    },
+    extends: ['eslint:recommended', 'plugin:vue/recommended', 'prettier'],
+    parserOptions: {
+        parser: '@babel/eslint-parser',
+        ecmaVersion: 2018,
+        sourceType: 'module',
+        requireConfigFile: false,
+    },
+    rules: {
+        'linebreak-style': ['error', 'unix'],
+        semi: ['error', 'always'],
+        'comma-dangle': ['error', 'always-multiline'],
+        'vue/require-v-for-key': 0,
+        'vue/require-default-prop': 0,
+        'vue/no-v-html': 0,
+        'vue/max-attributes-per-line': 0,
+        'vue/html-indent': ['error', 4],
+        'vue/script-indent': [
+            'error',
+            4,
+            {
+                baseIndent: 1,
+                switchCase: 1,
+            },
+        ],
+        'vue/no-unused-vars': 'warn',
+        'vue/html-self-closing': 0,
+        'vue/multi-word-component-names': 0,
+        'vue/no-reserved-component-names': 0,
+        'eol-last': ['error', 'always'],
+        'prettier/prettier': 'error',
+    },
+    globals: {
+        describe: true,
+        expect: true,
+        it: true,
+        test: true,
+    },
+    plugins: ['prettier'],
 };

.github/workflows/test-workflow.yml

@@ -59,3 +59,22 @@ jobs:
 
       - name: Test i18n packs integrity
         run: npm run test:i18n-packs
+
+  prettier:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Test with prettier
+        run: npm run test:prettier

.lintstagedrc.json

@@ -0,0 +1,9 @@
+{
+  "*.{js,vue}": [
+    "prettier --write",
+    "eslint --quiet --cache --fix"
+  ],
+  "*.scss": [
+    "stylelint --config node_modules/do-bulma/.stylelintrc.json --fix"
+  ]
+}

.prettierignore

@@ -0,0 +1,2 @@
+package.json
+package-lock.json

.prettierrc.json

@@ -0,0 +1,9 @@
+{
+    "singleQuote": true,
+    "trailingComma": "all",
+    "vueIndentScriptAndStyle": true,
+    "htmlWhitespaceSensitivity": "ignore",
+    "printWidth": 100,
+    "tabWidth": 4,
+    "singleAttributePerLine": true
+}