grafana/toolkit: prettier and lint fix in dev mode (#18131)

packages/grafana-toolkit/src/cli/tasks/plugin.build.ts

@@ -13,6 +13,9 @@ import { bundlePlugin as bundleFn, PluginBundleOptions } from './plugin/bundle';
 interface PluginBuildOptions {
   coverage: boolean;
 }
+interface Fixable {
+  fix?: boolean;
+}
 
 export const bundlePlugin = useSpinner<PluginBundleOptions>('Compiling...', async options => await bundleFn(options));
 
@@ -60,7 +63,7 @@ const getStylesSources = () => {
   return glob.sync(globPattern);
 };
 
-const prettierCheckPlugin = useSpinner<void>('Prettier check', async () => {
+export const prettierCheckPlugin = useSpinner<Fixable>('Prettier check', async ({ fix }) => {
   const prettierConfig = require(path.resolve(__dirname, '../../config/prettier.plugin.config.json'));
   const sources = [...getStylesSources(), ...getTypescriptSources()];
 
@@ -72,14 +75,22 @@ const prettierCheckPlugin = useSpinner<void>('Prettier check', async () => {
           throw new Error(err.message);
         }
 
-        if (
+        const opts = {
-          !prettier.check(data.toString(), {
+          ...prettierConfig,
-            ...prettierConfig,
+          filepath: s,
-            filepath: s,
+        };
-          })
+        if (!prettier.check(data.toString(), opts)) {
-        ) {
+          if (fix) {
-          console.log('TODO eslint/prettier fix? ' + s);
+            const fixed = prettier.format(data.toString(), opts);
-          failed = false; //true;
+            fs.writeFile(s, fixed, err => {
+              if (err) {
+                console.log('Error fixing ' + s, err);
+                failed = true;
+              }
+            });
+          } else {
+            failed = true;
+          }
         }
 
         resolve({
@@ -95,18 +106,19 @@ const prettierCheckPlugin = useSpinner<void>('Prettier check', async () => {
   if (failures.length) {
     console.log('\nFix Prettier issues in following files:');
     failures.forEach(f => console.log(f.path));
+    console.log('\nRun toolkit:dev to fix errors');
     throw new Error('Prettier failed');
   }
 });
 
 // @ts-ignore
-export const lintPlugin = useSpinner<void>('Linting', async () => {
+export const lintPlugin = useSpinner<Fixable>('Linting', async ({ fix }) => {
   let tsLintConfigPath = path.resolve(process.cwd(), 'tslint.json');
   if (!fs.existsSync(tsLintConfigPath)) {
     tsLintConfigPath = path.resolve(__dirname, '../../config/tslint.plugin.json');
   }
   const options = {
-    fix: true, // or fail
+    fix: fix === true,
     formatter: 'json',
   };
 
@@ -145,9 +157,9 @@ export const lintPlugin = useSpinner<void>('Linting', async () => {
 export const pluginBuildRunner: TaskRunner<PluginBuildOptions> = async ({ coverage }) => {
   await clean();
   await prepare();
-  await prettierCheckPlugin();
+  await prettierCheckPlugin({ fix: false });
   // @ts-ignore
-  await lintPlugin();
+  await lintPlugin({ fix: false });
   await testPlugin({ updateSnapshot: false, coverage });
   await bundlePlugin({ watch: false, production: true });
 };

packages/grafana-toolkit/src/cli/tasks/plugin.dev.ts

@@ -1,6 +1,7 @@
 import { Task, TaskRunner } from './task';
 import { bundlePlugin as bundleFn, PluginBundleOptions } from './plugin/bundle';
 import { useSpinner } from '../utils/useSpinner';
+import { lintPlugin, prettierCheckPlugin } from './plugin.build';
 
 // @ts-ignore
 import execa = require('execa');
@@ -40,6 +41,10 @@ const pluginDevRunner: TaskRunner<PluginBundleOptions> = async options => {
   if (options.watch) {
     await bundleFn(options);
   } else {
+    // Always fix lint/prettier in dev mode
+    await prettierCheckPlugin({ fix: true });
+    await lintPlugin({ fix: true });
+
     const result = await bundlePlugin(options);
     return result;
   }