fix: linting issues, trailingCommas: all (#1099)

* improve eslinting situation, added extensions for prettier
* add trailing commas
* simplify lint/fix/check/pretty/pre-commit
* lint-staged with yarn eslint --fix, prettier --write
* also disable conflicting rules prefer-arrow-callback, multiline, etc

Author: acao

.eslintignore

@@ -5,25 +5,14 @@
 # specifically un-ignore the source code, configuration files, etc.
 #
 # First: ignore FILES (not folders!)
+/{packages,examples}/**/*.{js,jsx,ts,tsx}
 
-/packages/**/*.js
-/packages/**/*.jsx
-/packages/**/*.ts
-/packages/**/*.tsx
-
-/examples/**/*.js
-/examples/**/*.jsx
-/examples/**/*.ts
-/examples/**/*.tsx
 #
 # Now un-ignore source code, tests, configuration, etc
-!/packages/*/src/**
-!/packages/*/cypress/**
-!/packages/*/test/**
-!/packages/codemirror-graphql/resources/**
+!/{packages,examples}/*/{src,cypress,resources}/**
+
 !.eslintrc.js
 !babel.config.js
-!/examples/**/{src,resources,cypress}/*
 #
 # End of the ignore dance.
 #
@@ -33,7 +22,7 @@
 
 # ESLint automatically ignores node_modules _in the root_, so we only need to specify nested node_modules
 **/node_modules
-/examples/graphiql-cdn/graphiql*
+/packages/graphiql/graphiql.*
 
 # Build artifacts
 **/flow-typed

.eslintrc.js

@@ -68,7 +68,7 @@ module.exports = {
     'no-regex-spaces': 1,
     'no-sparse-arrays': 1,
     'no-template-curly-in-string': 0,
-    'no-unexpected-multiline': 1,
+    'no-unexpected-multiline': 0, // prettier --list-different
     'no-unreachable': 1,
     'no-unsafe-finally': 1,
     'no-unsafe-negation': 1,
@@ -102,7 +102,7 @@ module.exports = {
     'no-extra-bind': 1,
     'no-extra-label': 1,
     'no-fallthrough': 1,
-    'no-floating-decimal': 1,
+    'no-floating-decimal': 0, // prettier --list-different
     'no-global-assign': 1,
     'no-implicit-coercion': 1,
     'no-implicit-globals': 0,
@@ -187,7 +187,7 @@ module.exports = {
     'id-match': 0,
     indent: 0,
     'line-comment-position': 0,
-    'linebreak-style': 1,
+    'linebreak-style': 0, // prettier --list-different
     'lines-around-comment': 0,
     'lines-around-directive': 0,
     'max-depth': 0,
@@ -246,7 +246,7 @@ module.exports = {
     'no-useless-rename': 1,
     'no-var': 1,
     'object-shorthand': 1,
-    'prefer-arrow-callback': [1, { allowNamedFunctions: true }],
+    'prefer-arrow-callback': [0, { allowNamedFunctions: true }], // prettier --list-different
     'prefer-const': 1,
     'prefer-numeric-literals': 0,
     'prefer-rest-params': 0,
@@ -316,7 +316,7 @@ module.exports = {
       files: ['*.js', '*.jsx'],
       rules: {
         // flowtype (https://github.com/gajus/eslint-plugin-flowtype)
-        'flowtype/boolean-style': 1,
+        'flowtype/boolean-style': 0, // prettier --list-different
         'flowtype/define-flow-type': 1,
         'flowtype/no-dupe-keys': 0,
         'flowtype/no-primitive-constructor-types': 1,

README.md

@@ -102,7 +102,7 @@ As of December 2019 we are officially supporting Windows OS for development tool
 3. `yarn build-bundles` - builds webpack bundles that are used for releases
 4. `yarn build-demo` - builds demo projects for netlify; we run this on CI to make sure webpack can consume our project in a standalone project.
 5. `yarn test` - runs all of the above alongside linting and checks, jest mocha Cypress etc.
-6. `yarn pretty` - autoformats
+6. `yarn format` - autoformats with eslint --fix and prettier
 7. `yarn lint` - checks for linting issues
 8. `yarn e2e` - runs cypress headlessly against the minified bundle and a local schema server, like in CI.
 9. `yarn jest` - runs global jest commands across the entire monorepo; try `yarn jest --watch` or `yarn jest DocExplorer` for example :D

package.json

@@ -5,9 +5,15 @@
     "packages/*",
     "examples/*"
   ],
+  "lint-staged": {
+    "*.{js,ts,jsx,tsx,md}": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
   "husky": {
     "hooks": {
-      "pre-commit": "yarn lint",
+      "pre-commit": "lint-staged",
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   },
@@ -23,12 +29,14 @@
     "e2e": "yarn workspace graphiql e2e",
     "cypress-open": "yarn workspace graphiql cypress-open",
     "t": "yarn run testonly",
-    "lint": "eslint --ext=ts,js,jsx,tsx . || (printf '\\033[33mTry: \\033[7m yarn format \\033[0m\\n' && exit 1)",
-    "lint-fix": "eslint --ext=ts,js,jsx,tsx . --fix",
+    "eslint": "eslint --ext=ts,js,jsx,tsx .",
+    "lint": "yarn eslint && yarn lint-check && yarn pretty-check",
+    "lint-fix": "yarn eslint --fix",
     "lint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
     "check": "flow check --show-all-errors",
     "pretty": "node resources/pretty.js",
     "pretty-check": "node resources/pretty.js --check",
+    "format": "yarn eslint --fix && yarn pretty",
     "version-release": "lerna version",
     "version-prerelease": "lerna version --conventional-prerelease",
     "version-graduate": "lerna version --conventional-graduate"
@@ -73,6 +81,7 @@
     "jest-environment-jsdom": "^24.8.0",
     "jest-environment-jsdom-global": "^1.2.0",
     "lerna": "^3.16.4",
+    "lint-staged": "^10.0.0-beta.8",
     "mkdirp": "^0.5.1",
     "mocha": "6.1.4",
     "prettier": "^1.18.2",

packages/codemirror-graphql/resources/watch.js

@@ -101,14 +101,14 @@ function checkFiles(filepaths) {
     .then(testSuccess =>
       lintFiles(filepaths).then(lintSuccess =>
         typecheckStatus().then(
-          typecheckSuccess => testSuccess && lintSuccess && typecheckSuccess
-        )
-      )
+          typecheckSuccess => testSuccess && lintSuccess && typecheckSuccess,
+        ),
+      ),
     )
     .catch(() => false)
     .then(success => {
       process.stdout.write(
-        '\n' + (success ? '' : '\x07') + green(invert('watching...'))
+        '\n' + (success ? '' : '\x07') + green(invert('watching...')),
       );
     });
 }
@@ -129,7 +129,7 @@ function parseFiles(filepaths) {
           srcPath(filepath),
         ]);
       }
-    })
+    }),
   );
 }
 
@@ -141,8 +141,8 @@ function runTests(filepaths) {
     ['--reporter', 'progress', '--require', 'resources/mocha-bootload'].concat(
       allTests(filepaths)
         ? filepaths.map(srcPath)
-        : ['src/**/__tests__/**/*.js']
-    )
+        : ['src/**/__tests__/**/*.js'],
+    ),
   ).catch(() => false);
 }
 
@@ -158,14 +158,14 @@ function lintFiles(filepaths) {
             .catch(() => false)
             .then(success => {
               console.log(
-                CLEARLINE + '  ' + (success ? CHECK : X) + ' ' + filepath
+                CLEARLINE + '  ' + (success ? CHECK : X) + ' ' + filepath,
               );
               return prevSuccess && success;
             });
         }
         return prevSuccess;
       }),
-    Promise.resolve(true)
+    Promise.resolve(true),
   );
 }
 

packages/codemirror-graphql/src/__tests__/hint-test.js

@@ -52,7 +52,7 @@ describe('graphql-hint', () => {
   it('attaches a GraphQL hint function with correct mode/hint options', async () => {
     const editor = await createEditorWithHint();
     expect(editor.getHelpers(editor.getCursor(), 'hint')).to.not.have.lengthOf(
-      0
+      0,
     );
   });
 
@@ -72,11 +72,11 @@ describe('graphql-hint', () => {
     const suggestions = await getHintSuggestions('{ ', { line: 0, ch: 2 });
     const fieldConfig = TestSchema.getQueryType().getFields();
     const fieldNames = Object.keys(fieldConfig).filter(
-      name => !fieldConfig[name].isDeprecated
+      name => !fieldConfig[name].isDeprecated,
     );
     checkSuggestions(
       fieldNames.concat(['__typename', '__schema', '__type']),
-      suggestions.list
+      suggestions.list,
     );
 
     const fieldTypes = fieldNames.map(name => fieldConfig[name].type);
@@ -85,7 +85,7 @@ describe('graphql-hint', () => {
         item =>
           item.text !== '__schema' &&
           item.text !== '__type' &&
-          item.text !== '__typename'
+          item.text !== '__typename',
       )
       .map(item => item.type);
     expect(fieldTypes).to.deep.equal(expectedTypes);
@@ -99,7 +99,7 @@ describe('graphql-hint', () => {
     const fieldConfig = TestSchema.getType('First').getFields();
     checkSuggestions(
       [...Object.keys(fieldConfig), '__typename'],
-      suggestions.list
+      suggestions.list,
     );
   });
 
@@ -161,7 +161,7 @@ describe('graphql-hint', () => {
   it('provides correct directive suggestions on args definitions', async () => {
     const suggestions = await getHintSuggestions(
       'type Type { field(arg: String @',
-      { line: 0, ch: 31 }
+      { line: 0, ch: 31 },
     );
     const directiveNames = ['onArg', 'onAllDefs'];
     checkSuggestions(directiveNames, suggestions.list);
@@ -209,23 +209,23 @@ describe('graphql-hint', () => {
       ch: 21,
     });
     const testInputNames = Object.keys(
-      TestSchema.getType('TestInput').getFields()
+      TestSchema.getType('TestInput').getFields(),
     );
     checkSuggestions(testInputNames, suggestions.list);
   });
 
   it('provides fragment name suggestion', async () => {
     const suggestions = await getHintSuggestions(
       'fragment Foo on Test { id }  query { ...',
-      { line: 0, ch: 40 }
+      { line: 0, ch: 40 },
     );
     checkSuggestions(['Foo'], suggestions.list);
   });
 
   it('provides fragment names for fragments defined lower', async () => {
     const suggestions = await getHintSuggestions(
       'query { ... } fragment Foo on Test { id }',
-      { line: 0, ch: 11 }
+      { line: 0, ch: 11 },
     );
     checkSuggestions(['Foo'], suggestions.list);
   });
@@ -237,15 +237,15 @@ describe('graphql-hint', () => {
         'fragment Baz on Second { name } ' +
         'fragment Qux on TestUnion { name } ' +
         'fragment Nrf on Test { id }',
-      { line: 0, ch: 31 }
+      { line: 0, ch: 31 },
     );
     checkSuggestions(['Bar', 'Baz', 'Qux'], suggestions.list);
   });
 
   it('provides correct field name suggestion inside inline fragment', async () => {
     const suggestions = await getHintSuggestions(
       'fragment Foo on TestUnion { ... on First { ',
-      { line: 0, ch: 43 }
+      { line: 0, ch: 43 },
     );
     const fieldNames = Object.keys(TestSchema.getType('First').getFields());
     fieldNames.push('__typename');
@@ -255,7 +255,7 @@ describe('graphql-hint', () => {
   it('provides correct field name suggestion inside typeless inline fragment', async () => {
     const suggestions = await getHintSuggestions(
       'fragment Foo on First { ... { ',
-      { line: 0, ch: 30 }
+      { line: 0, ch: 30 },
     );
     const fieldNames = Object.keys(TestSchema.getType('First').getFields());
     fieldNames.push('__typename');

packages/codemirror-graphql/src/__tests__/lint-test.js

@@ -44,7 +44,7 @@ describe('graphql-lint', () => {
   it('attaches a GraphQL lint function with correct mode/lint options', () => {
     const editor = createEditorWithLint();
     expect(editor.getHelpers(editor.getCursor(), 'lint')).to.not.have.lengthOf(
-      0
+      0,
     );
   });
 

packages/codemirror-graphql/src/__tests__/mode-test.js

@@ -39,25 +39,25 @@ describe('graphql-mode', () => {
 
   it('parses Relay-style anonymous FragmentDefinitions', () => {
     CodeMirror.runMode('fragment on Test { id }', 'graphql', (token, style) =>
-      expect(style).to.not.equal('invalidchar')
+      expect(style).to.not.equal('invalidchar'),
     );
   });
 
   it('parses inline fragments with optional syntax correctly', () => {
     CodeMirror.runMode(
       '{ ... on OptionalType { name } }',
       'graphql',
-      (token, style) => expect(style).to.not.equal('invalidchar')
+      (token, style) => expect(style).to.not.equal('invalidchar'),
     );
 
     CodeMirror.runMode('{ ... { name } }', 'graphql', (token, style) =>
-      expect(style).to.not.equal('invalidchar')
+      expect(style).to.not.equal('invalidchar'),
     );
 
     CodeMirror.runMode(
       '{ ... @optionalDirective { name } }',
       'graphql',
-      (token, style) => expect(style).to.not.equal('invalidchar')
+      (token, style) => expect(style).to.not.equal('invalidchar'),
     );
   });
 
@@ -88,7 +88,7 @@ describe('graphql-mode', () => {
   it('parses schema-kitchen-sink query without invalidchar', () => {
     const schemaKitchenSink = readFileSync(
       join(__dirname, '/schema-kitchen-sink.graphql'),
-      { encoding: 'utf8' }
+      { encoding: 'utf8' },
     );
 
     CodeMirror.runMode(schemaKitchenSink, 'graphql', (token, style) => {
@@ -110,7 +110,7 @@ describe('graphql-mode', () => {
       'graphql',
       (token, style) => {
         expect(style).to.not.equal('invalidchar');
-      }
+      },
     );
 
     CodeMirror.runMode(
@@ -124,7 +124,7 @@ describe('graphql-mode', () => {
       'graphql',
       (token, style) => {
         expect(style).to.not.equal('invalidchar');
-      }
+      },
     );
   });
 });

packages/codemirror-graphql/src/hint.js

@@ -39,7 +39,7 @@ CodeMirror.registerHelper('hint', 'graphql', (editor, options) => {
     schema,
     editor.getValue(),
     cur,
-    token
+    token,
   );
   /**
    * GraphQL language service responds to the autocompletion request with

packages/codemirror-graphql/src/utils/SchemaReference.js

@@ -103,7 +103,7 @@ export function getEnumValueReference(typeInfo: any): EnumValueReference {
 // though it defaults to the current type.
 export function getTypeReference(
   typeInfo: any,
-  type?: GraphQLNamedType
+  type?: GraphQLNamedType,
 ): TypeReference {
   return {
     kind: 'Type',