feat: add use-env-prefix rules (#113)

* feat: add initial rule file

* feat: create rule

* feat(tests): add util load-fixture-creator

* feat(utils): add env-parse

* feat: refactor use-env-prefix rule

* feat: improve error message

Author: tyankatsu0105

.eslintrc.js

@@ -21,5 +21,8 @@ module.exports = {
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/ban-types": "off",
     "@typescript-eslint/no-explicit-any": "off",
+    "no-irregular-whitespace": ["error", {
+      "skipRegExps": true
+    }]
   },
 };

.gitignore

@@ -89,7 +89,7 @@ typings/
 .yarn-integrity
 
 # dotenv environment variables file
-.env
+/.env
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache

docs/rules/README.md

@@ -13,3 +13,4 @@ title: Rules
 | [gridsome/format-query-block](/rules/format-query-block)   | Format fix for `<page-query>` and `<static-query>` in .vue. Using Prettier API | :wrench: |
 | [gridsome/require-g-image-src](/rules/require-g-image-src) | Require v-bind:src or src of `<g-image>` elements                              |          |
 | [gridsome/require-g-link-to](/rules/require-g-link-to)     | Require v-bind:to or to of `<g-link>` elements                                 |          |
+| [gridsome/use-env-prefix](/rules/use-env-prefix)           | Use prefix `GRIDSOME_` when using process.env in browser                       |          |

docs/rules/use-env-prefix.md

@@ -0,0 +1,66 @@
+---
+title: use-env-prefix
+sidebarDepth: 0
+description: Use prefix `GRIDSOME_` when using process.env in browser
+---
+
+## Use prefix `GRIDSOME_` when using process.env in browser (gridsome/use-env-prefix)
+
+## :book: Rule Details
+
+- This rule reports the `process.env` expression which do not include prefix `GRIDSOME_`.
+
+If you want to know more information, see: [Environment variables](https://gridsome.org/docs/environment-variables/)
+
+:-1: Examples of **incorrect** code for this rule:
+
+```html
+<template></template>
+
+<script>
+  export default {
+    data() {
+      return {
+        url: process.env.API_URL, // Possible error
+      };
+    },
+  };
+</script>
+```
+
+:+1: Examples of **correct** code for this rule:
+
+```html
+<template></template>
+
+<script>
+  export default {
+    data() {
+      return {
+        url: process.env.GRIDSOME_API_URL,
+      };
+    },
+  };
+</script>
+```
+
+## :wrench: Options
+
+```json
+{
+  "gridsome/use-env-prefix": [
+    "warn",
+    {
+      {
+        "pathsForBrowserfile": ["src/**/*"],
+        "envPath": ".env",
+      },
+    }
+  ]
+}
+```
+
+- `pathsForBrowserfile` (`string[]`) ... This option can specify paths for browser.
+  - default ... ["src/**/*"]
+- `envPath` (`string`) ... This option can specify path for env file.
+  - default ... ".env"

lib/configs/recommended.ts

@@ -4,5 +4,6 @@ export = {
     "gridsome/format-query-block": "warn",
     "gridsome/require-g-image-src": "error",
     "gridsome/require-g-link-to": "warn",
+    "gridsome/use-env-prefix": "warn",
   },
 };

lib/rules.ts

@@ -2,9 +2,11 @@
 import formatQueryBlock from "./rules/format-query-block";
 import requireGImageSrc from "./rules/require-g-image-src";
 import requireGLinkTo from "./rules/require-g-link-to";
+import useEnvPrefix from "./rules/use-env-prefix";
 
 export const rules = {
   "format-query-block": formatQueryBlock,
   "require-g-image-src": requireGImageSrc,
   "require-g-link-to": requireGLinkTo,
+  "use-env-prefix": useEnvPrefix,
 };

lib/rules/use-env-prefix.ts

@@ -0,0 +1,88 @@
+/**
+ * @author tyankatsu
+ * @copyright 2020 tyankatsu. All rights reserved.
+ * See LICENSE file in root directory for full license.
+ */
+import { AST } from "vue-eslint-parser";
+import minimatch from "minimatch";
+import { createRule, Env } from "../utils";
+import * as Fs from "fs";
+
+const PREFIX = "GRIDSOME_";
+
+type Options = {
+  pathsForBrowserfile?: string[];
+  envPath?: string;
+};
+
+const defaultOptions: [Options] = [{}];
+
+type MessageIds = "useEnvPrefix";
+export = createRule<[Options], MessageIds>({
+  name: "use-env-prefix",
+  meta: {
+    docs: {
+      description: "Use prefix `GRIDSOME_` when using process.env in browser",
+      category: "Possible Errors",
+      recommended: false,
+    },
+    type: "problem",
+    messages: {
+      useEnvPrefix: "Use `process.env.{{ addedPrefixEnv }}`.",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          pathsForBrowserfile: {
+            type: "array",
+            items: {
+              type: "string",
+            },
+          },
+          envPath: {
+            type: "string",
+          },
+        },
+      },
+    ],
+  },
+  defaultOptions,
+  create(context) {
+    const filename = context.getFilename();
+
+    const pathsForBrowserfileOption = context.options[0]
+      ?.pathsForBrowserfile || ["src/**/*"];
+    const envPathOption = context.options[0]?.envPath || ".env";
+
+    const isClientfile = pathsForBrowserfileOption.some((clientPath) =>
+      minimatch(filename, clientPath)
+    );
+
+    const envSource = Fs.readFileSync(envPathOption, { encoding: "utf8" });
+    const parsedEnvSource = new Env(envSource).parse();
+
+    return {
+      "MemberExpression[object.object.name='process'][object.property.name='env']"(
+        node: AST.ESLintMemberExpression
+      ) {
+        if (!isClientfile) return;
+        if (node.property.type !== "Identifier") return;
+        if (node.property.name.includes(PREFIX)) return;
+
+        const envName = node.property.name;
+
+        if (parsedEnvSource.has(envName)) {
+          context.report({
+            node,
+            loc: node.loc,
+            messageId: "useEnvPrefix",
+            data: {
+              addedPrefixEnv: `${PREFIX}${envName}`,
+            },
+          });
+        }
+      },
+    };
+  },
+});

lib/utils/env.ts

@@ -0,0 +1,33 @@
+const COMMENT_PREFIX = "#";
+const SEPARATER_COMMENT = "=";
+const SEPARATER_SPACE = /( |　)+/;
+const NEWLINES = /\n|\r|\r\n/;
+
+const isCommentCode = (line: string) => line.charAt(0) === COMMENT_PREFIX;
+
+export class Env {
+  constructor(private source: string) {}
+
+  public parse() {
+    const result = new Map<string, string>();
+
+    this.source
+      .toString()
+      .trim()
+      .split(NEWLINES)
+      .forEach((line) => {
+        const trimmedLine = line.trim();
+
+        if (isCommentCode(trimmedLine)) return;
+
+        const [key, ...value] = trimmedLine.split(SEPARATER_COMMENT);
+        const joinedValue = value
+          .join(SEPARATER_COMMENT)
+          .split(SEPARATER_SPACE)[0];
+
+        result.set(key, joinedValue);
+      });
+
+    return result;
+  }
+}

lib/utils/index.ts

@@ -13,3 +13,8 @@ export * from "./get-code-wrap-indent-info";
 // ====================================================
 export * from "./attribute";
 export * from "./directive";
+
+// ====================================================
+// env
+// ====================================================
+export * from "./env";