Add Vue Eslint (codesandbox#571)

* Add Vue Eslint

* Fix error

* Add sharp back

* Revert "Add sharp back"

This reverts commit 7c388fb.

* Revert "Revert "Add sharp back""

This reverts commit e2a1cef.

* Reset cache

* Empty commit

Author: CompuIves

.circleci/config.yml

@@ -9,30 +9,30 @@ jobs:
       - checkout
       - restore_cache:
           keys:
-            - v3-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
-            - v3-dependency-cache-{{ .Branch }}
-            - v3-dependency-cache
+            - v4-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+            - v4-dependency-cache-{{ .Branch }}
+            - v4-dependency-cache
       - restore_cache:
           keys:
-            - v3-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
-            - v3-standalone-dependency-cache-{{ .Branch }}
-            - v3-standalone-dependency-cache
+            - v4-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
+            - v4-standalone-dependency-cache-{{ .Branch }}
+            - v4-standalone-dependency-cache
       - run:
           name: Install Dependencies
           command: yarn install
       - save_cache:
-          key: v3-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+          key: v4-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
           paths:
             - node_modules
       - save_cache:
-          key: v3-standalone-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+          key: v4-standalone-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
           paths:
             - standalone-packages/codesandbox-browserfs/node_modules
       - run:
           name: Build
           command: yarn build:dependents
       - save_cache:
-          key: v3-repo-{{ .Environment.CIRCLE_SHA1 }}
+          key: v4-repo-{{ .Environment.CIRCLE_SHA1 }}
           paths:
             - ~/codesandbox-client
 
@@ -42,19 +42,19 @@ jobs:
     working_directory: ~/codesandbox-client
     steps:
       - restore_cache:
-          key: v3-repo-{{ .Environment.CIRCLE_SHA1 }}
+          key: v4-repo-{{ .Environment.CIRCLE_SHA1 }}
       # We do this to compare sizes from these builds with master
       - restore_cache:
-          key: v3-prod-app-build-cache-master
+          key: v4-prod-app-build-cache-master
       - run:
           name: Build Application
           command: yarn build:prod
       - save_cache:
-          key: v3-prod-app-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+          key: v4-prod-app-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
           paths:
             - ./packages/app/www
       - save_cache:
-          key: v3-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+          key: v4-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
           paths:
             - ./www
       - store_artifacts:
@@ -67,7 +67,7 @@ jobs:
     working_directory: ~/codesandbox-client
     steps:
       - restore_cache:
-          key: v3-repo-{{ .Environment.CIRCLE_SHA1 }}
+          key: v4-repo-{{ .Environment.CIRCLE_SHA1 }}
       - run:
           name: Start Test Server
           command: yarn start:test
@@ -91,7 +91,7 @@ jobs:
     working_directory: ~/codesandbox-client
     steps:
       - restore_cache:
-          key: v3-repo-{{ .Environment.CIRCLE_SHA1 }}
+          key: v4-repo-{{ .Environment.CIRCLE_SHA1 }}
       - run:
           name: Test
           command: yarn test --ci --testResultsProcessor="jest-junit"
@@ -104,7 +104,7 @@ jobs:
     working_directory: ~/codesandbox-client
     steps:
       - restore_cache:
-          key: v3-repo-{{ .Environment.CIRCLE_SHA1 }}
+          key: v4-repo-{{ .Environment.CIRCLE_SHA1 }}
       - run:
           name: Lint
           command: yarn lint
@@ -115,9 +115,9 @@ jobs:
     working_directory: ~/codesandbox-client
     steps:
       - restore_cache:
-          key: v3-repo-{{ .Environment.CIRCLE_SHA1 }}
+          key: v4-repo-{{ .Environment.CIRCLE_SHA1 }}
       - restore_cache:
-          key: v3-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+          key: v4-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
       - add_ssh_keys:
           fingerprints:
             - "f7:f1:e6:60:96:24:d9:cd:1b:8b:c0:34:e7:ee:fa:82"

package.json

@@ -41,7 +41,7 @@
   ],
   "devDependencies": {
     "all-contributors-cli": "^4.3.0",
-    "babel-eslint": "^7.2.3",
+    "babel-eslint": "^8.2.1",
     "eslint": "CompuIves/eslint#add/define-parser",
     "eslint-config-airbnb": "^15.0.1",
     "eslint-config-prettier": "^2.1.1",

packages/app/config/webpack.common.js

@@ -1,5 +1,6 @@
 const webpack = require('webpack');
 const path = require('path');
+const fs = require('fs');
 const paths = require('./paths');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
@@ -17,6 +18,24 @@ const __PROD__ = NODE_ENV === 'production'; // eslint-disable-line no-underscore
 const __TEST__ = NODE_ENV === 'test'; // eslint-disable-line no-underscore-dangle
 const babelConfig = __DEV__ ? babelDev : babelProd;
 
+// Shim for `eslint-plugin-vue/lib/index.js`
+const ESLINT_PLUGIN_VUE_INDEX = `module.exports = {
+  rules: {${fs
+    .readdirSync('../../node_modules/eslint-plugin-vue/lib/rules')
+    .filter(filename => path.extname(filename) === '.js')
+    .map(filename => {
+      const ruleId = path.basename(filename, '.js');
+      return `        "${ruleId}": require("eslint-plugin-vue/lib/rules/${
+        filename
+      }"),`;
+    })
+    .join('\n')}
+  },
+  processors: {
+      ".vue": require("eslint-plugin-vue/lib/processor")
+  }
+}`;
+
 module.exports = {
   entry: __TEST__
     ? {
@@ -67,6 +86,67 @@ module.exports = {
         ],
         loader: 'happypack/loader',
       },
+
+      // `eslint-plugin-vue/lib/index.js` depends on `fs` module we cannot use in browsers, so needs shimming.
+      {
+        test: new RegExp(
+          `eslint-plugin-vue\\${path.sep}lib\\${path.sep}index\\.js$`
+        ),
+        loader: 'string-replace-loader',
+        options: {
+          search: '[\\s\\S]+', // whole file.
+          replace: ESLINT_PLUGIN_VUE_INDEX,
+          flags: 'g',
+        },
+      },
+      // `eslint` has some dynamic `require(...)`.
+      // Delete those.
+      {
+        test: new RegExp(
+          `eslint\\${path.sep}lib\\${path.sep}(?:linter|rules)\\.js$`
+        ),
+        loader: 'string-replace-loader',
+        options: {
+          search: '(?:\\|\\||(\\())\\s*require\\(.+?\\)',
+          replace: '$1',
+          flags: 'g',
+        },
+      },
+      // `vue-eslint-parser` has `require(parserOptions.parser || "espree")`.
+      // Modify it by a static importing.
+      {
+        test: /vue-eslint-parser/,
+        loader: 'string-replace-loader',
+        options: {
+          search: 'require(parserOptions.parser || "espree")',
+          replace:
+            '(parserOptions.parser === "babel-eslint" ? require("babel-eslint") : require("espree"))',
+        },
+      },
+      // Patch for `babel-eslint`
+      {
+        test: new RegExp(
+          `babel-eslint\\${path.sep}lib\\${path.sep}index\\.js$`
+        ),
+        loader: 'string-replace-loader',
+        options: {
+          search: '[\\s\\S]+', // whole file.
+          replace:
+            'module.exports.parseForESLint = require("./parse-with-scope")',
+          flags: 'g',
+        },
+      },
+      {
+        test: new RegExp(
+          `babel-eslint\\${path.sep}lib\\${path.sep}patch-eslint-scope\\.js$`
+        ),
+        loader: 'string-replace-loader',
+        options: {
+          search: '[\\s\\S]+', // whole file.
+          replace: 'module.exports = () => {}',
+          flags: 'g',
+        },
+      },
       // JSON is not enabled by default in Webpack but both Node and Browserify
       // allow it implicitly so we also enable it.
       {

packages/app/package.json

@@ -123,6 +123,7 @@
     "debug": "^2.6.8",
     "downshift": "^1.0.0-rc.14",
     "eslint-config-react-app": "^1.0.5",
+    "eslint-plugin-vue": "^4.2.2",
     "file-saver": "^1.3.3",
     "geniejs": "^0.5.0",
     "glamor": "^2.20.25",
@@ -184,10 +185,12 @@
     "script-ext-html-webpack-plugin": "^1.8.8",
     "shelljs": "^0.7.8",
     "store": "^2.0.12",
+    "string-replace-loader": "^1.3.0",
     "styled-components": "^3.1.4",
     "svg-react-loader": "^0.4.4",
     "tern": "^0.21.0",
     "vue": "^2.5.2",
+    "vue-eslint-parser": "^2.0.3",
     "vue-hot-reload-api": "^2.2.4",
     "vue-template-compiler": "^2.5.2",
     "vue-template-es2015-compiler": "^1.6.0"

packages/app/src/app/components/CodeEditor/Monaco/index.js

@@ -563,7 +563,7 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
     const currentModule = this.currentModule;
 
     const mode = await this.getMode(currentModule.title);
-    if (mode === 'javascript') {
+    if (mode === 'javascript' || mode === 'vue') {
       this.monaco.editor.setModelMarkers(
         this.editor.getModel(),
         'eslint',
@@ -680,12 +680,13 @@ class MonacoEditor extends React.Component<Props, State> implements Editor {
 
   lint = async (code: string, title: string, version: number) => {
     const mode = await this.getMode(title);
-    if (mode === 'javascript') {
+    if (mode === 'javascript' || mode === 'vue') {
       if (this.lintWorker) {
         this.lintWorker.postMessage({
           code,
           title,
           version,
+          template: this.sandbox.template,
         });
       }
     }

…ents/CodeEditor/Monaco/workers/linter.js …odeEditor/Monaco/workers/linter/index.jspackages/app/src/app/components/CodeEditor/Monaco/workers/linter.js renamed to packages/app/src/app/components/CodeEditor/Monaco/workers/linter/index.js packages/app/src/app/components/CodeEditor/Monaco/workers/linter.js renamed to packages/app/src/app/components/CodeEditor/Monaco/workers/linter/index.js

@@ -1,6 +1,6 @@
 import Linter from 'eslint/lib/linter';
 
-import monkeypatch from './utils/monkeypatch-babel-eslint';
+import monkeypatch from './monkeypatch-babel-eslint';
 
 /* eslint-disable global-require */
 const allRules = {
@@ -104,7 +104,6 @@ const restrictedGlobals = [
 ];
 
 const defaultConfig = {
-  extends: ['prettier', 'prettier/react', 'prettier/flowtype', 'react-app'],
   parserOptions: {
     ecmaVersion: 8,
     sourceType: 'module',
@@ -310,9 +309,10 @@ monkeypatch({}, defaultConfig.parserOptions);
 
 const linter = new Linter();
 
-linter.defineParser('babel-eslint', {
-  parse: require('babel-eslint').parseNoPatch, // eslint-disable-line global-require
-});
+linter.defineParser(
+  'babel-eslint',
+  require('babel-eslint') // eslint-disable-line global-require
+);
 
 linter.defineRules(allRules);
 
@@ -343,10 +343,27 @@ function getSeverity(error) {
 }
 
 // Respond to message from parent thread
-self.addEventListener('message', event => {
-  const { code, version } = event.data;
+self.addEventListener('message', async event => {
+  const { code, version, title: filename, template } = event.data;
+
+  let config = defaultConfig;
+  let options = { filename };
+
+  if (template === 'vue-cli') {
+    const {
+      getConfig: getVueConfig,
+      getVerifyOptions: getVueVerifyOptions,
+    } = await import('./vue');
+
+    config = await getVueConfig(linter);
+    config.rules = {
+      ...defaultConfig.rules,
+      ...config.rules,
+    };
+    options = { ...options, ...getVueVerifyOptions(filename) };
+  }
 
-  const validations = linter.verify(code, defaultConfig);
+  const validations = linter.verify(code, config, options);
 
   const markers = validations.map(error => {
     const { line: startL, column: startCol } = getPos(error, true);

…orkers/utils/monkeypatch-babel-eslint.js …rkers/linter/monkeypatch-babel-eslint.jspackages/app/src/app/components/CodeEditor/Monaco/workers/utils/monkeypatch-babel-eslint.js renamed to packages/app/src/app/components/CodeEditor/Monaco/workers/linter/monkeypatch-babel-eslint.js packages/app/src/app/components/CodeEditor/Monaco/workers/utils/monkeypatch-babel-eslint.js renamed to packages/app/src/app/components/CodeEditor/Monaco/workers/linter/monkeypatch-babel-eslint.js

@@ -0,0 +1,50 @@
+export default {
+  parser: 'vue-eslint-parser',
+  parserOptions: Object.freeze({
+    parser: 'babel-eslint',
+    ecmaVersion: 2015,
+    sourceType: 'module',
+    ecmaFeatures: Object.freeze({
+      jsx: true,
+      experimentalObjectRestSpread: true,
+    }),
+  }),
+  env: {
+    browser: true,
+    es6: true,
+  },
+  plugins: ['vue'],
+  rules: {
+    'vue/comment-directive': 'error',
+    'vue/jsx-uses-vars': 'error',
+    'vue/no-async-in-computed-properties': 'error',
+    'vue/no-dupe-keys': 'error',
+    'vue/no-duplicate-attributes': 'error',
+    'vue/no-parsing-error': 'error',
+    'vue/no-reserved-keys': 'error',
+    'vue/no-shared-component-data': 'error',
+    'vue/no-side-effects-in-computed-properties': 'error',
+    'vue/no-template-key': 'error',
+    'vue/no-textarea-mustache': 'error',
+    'vue/no-unused-vars': 'error',
+    'vue/require-component-is': 'error',
+    'vue/require-render-return': 'error',
+    'vue/require-v-for-key': 'error',
+    'vue/require-valid-default-prop': 'error',
+    'vue/return-in-computed-property': 'error',
+    'vue/valid-template-root': 'error',
+    'vue/valid-v-bind': 'error',
+    'vue/valid-v-cloak': 'error',
+    'vue/valid-v-else-if': 'error',
+    'vue/valid-v-else': 'error',
+    'vue/valid-v-for': 'error',
+    'vue/valid-v-html': 'error',
+    'vue/valid-v-if': 'error',
+    'vue/valid-v-model': 'error',
+    'vue/valid-v-on': 'error',
+    'vue/valid-v-once': 'error',
+    'vue/valid-v-pre': 'error',
+    'vue/valid-v-show': 'error',
+    'vue/valid-v-text': 'error',
+  },
+};

packages/app/src/app/components/CodeEditor/Monaco/workers/linter/vue/default-config.js

@@ -0,0 +1,29 @@
+import plugin from 'eslint-plugin-vue';
+import * as parser from 'vue-eslint-parser';
+import config from './default-config';
+
+let pluginsInitialized = false;
+
+export async function getConfig(linter) {
+  if (!pluginsInitialized) {
+    pluginsInitialized = true;
+
+    linter.defineParser('vue-eslint-parser', parser);
+    Object.keys(plugin.rules).forEach(name => {
+      linter.defineRule(`vue/${name}`, plugin.rules[name]);
+    });
+  }
+
+  return config;
+}
+
+export function getVerifyOptions(filename: string) {
+  if (filename.endsWith('.vue')) {
+    return {
+      preprocess: plugin.processors['.vue'].preprocess,
+      postprocess: plugin.processors['.vue'].postprocess,
+    };
+  }
+
+  return {};
+}