replaces unneeded backticks with single quotes + lint them! (#3196)

.eslintrc.js

@@ -306,6 +306,7 @@ module.exports = {
 
         'unicorn/prefer-switch': 'error',
         'unicorn/prefer-dom-node-text-content': 'error',
+        quotes: ['error', 'single', { avoidEscape: true }], // Matches Prettier, but also replaces backticks with single quotes
         // TODO: Fix all errors for the following rules included in recommended config
         '@typescript-eslint/no-var-requires': 'off',
       },

examples/graphiql-webpack/src/index.jsx

@@ -20,15 +20,15 @@ const getQuery = (arg, spaceCount) => {
   const { query } = operationDataList[0];
   const anonymousQuery = removeQueryName(query);
   return (
-    ` `.repeat(spaceCount) +
-    anonymousQuery.replaceAll('\n', `\n` + ` `.repeat(spaceCount))
+    ' '.repeat(spaceCount) +
+    anonymousQuery.replaceAll('\n', '\n' + ' '.repeat(spaceCount))
   );
 };
 
 const exampleSnippetOne = {
-  name: `Example One`,
-  language: `JavaScript`,
-  codeMirrorMode: `jsx`,
+  name: 'Example One',
+  language: 'JavaScript',
+  codeMirrorMode: 'jsx',
   options: [],
   generate: arg => `export const query = graphql\`
 ${getQuery(arg, 2)}
@@ -37,9 +37,9 @@ ${getQuery(arg, 2)}
 };
 
 const exampleSnippetTwo = {
-  name: `Example Two`,
-  language: `JavaScript`,
-  codeMirrorMode: `jsx`,
+  name: 'Example Two',
+  language: 'JavaScript',
+  codeMirrorMode: 'jsx',
   options: [],
   generate: arg => `import { graphql } from 'graphql'
 

examples/monaco-graphql-webpack/src/editors.ts

@@ -28,9 +28,9 @@ const variablesString =
   "name": true
 }`;
 
-const resultsString = `{}`;
+const resultsString = '{}';
 
-const schemaSdlString = localStorage.getItem('schema-sdl') ?? ``;
+const schemaSdlString = localStorage.getItem('schema-sdl') ?? '';
 
 const THEME = 'vs-dark';
 

examples/monaco-graphql-webpack/src/index.ts

@@ -239,7 +239,7 @@ function renderToolbar(toolbar: HTMLElement) {
   schemaReloadButton.title = 'Reload the graphql schema';
 
   schemaStatus.id = 'schema-status';
-  schemaStatus.innerHTML = `Schema Empty`;
+  schemaStatus.innerHTML = 'Schema Empty';
 
   toolbar.append(
     schemaPicker,
@@ -273,7 +273,8 @@ function getSchemaPicker(): HTMLSelectElement {
 export function renderGithubLoginButton() {
   const githubLoginWrapper = document.createElement('div');
   githubLoginWrapper.id = 'github-login-wrapper';
-  githubLoginWrapper.innerHTML = `<p>Using Netlify's OAuth client to retrieve your token, you'll see a simple github graphql <code>monaco-graphql</code> Demo.</p>`;
+  githubLoginWrapper.innerHTML =
+    "<p>Using Netlify's OAuth client to retrieve your token, you'll see a simple GitHub graphql <code>monaco-graphql</code> Demo.</p>";
   const githubButton = document.createElement('button');
 
   const logoutButton = document.createElement('button');

jest.config.base.js

@@ -44,7 +44,7 @@ module.exports = (dir, env = 'jsdom') => {
       'types.ts',
     ],
 
-    roots: [`<rootDir>`],
+    roots: ['<rootDir>'],
 
     rootDir: dir,
     name: package.name,

packages/graphiql-plugin-code-exporter/README.md

@@ -55,15 +55,15 @@ const getQuery = (arg, spaceCount) => {
   const { query } = operationDataList[0];
   const anonymousQuery = removeQueryName(query);
   return (
-    ` `.repeat(spaceCount) +
+    ' '.repeat(spaceCount) +
     anonymousQuery.replaceAll('\n', '\n' + ' '.repeat(spaceCount))
   );
 };
 
 const exampleSnippetOne = {
-  name: `Example One`,
-  language: `JavaScript`,
-  codeMirrorMode: `jsx`,
+  name: 'Example One',
+  language: 'JavaScript',
+  codeMirrorMode: 'jsx',
   options: [],
   generate: arg => `export const query = graphql\`
 ${getQuery(arg, 2)}
@@ -72,9 +72,9 @@ ${getQuery(arg, 2)}
 };
 
 const exampleSnippetTwo = {
-  name: `Example Two`,
-  language: `JavaScript`,
-  codeMirrorMode: `jsx`,
+  name: 'Example Two',
+  language: 'JavaScript',
+  codeMirrorMode: 'jsx',
   options: [],
   generate: arg => `import { graphql } from 'graphql'
 

packages/graphiql-react/src/editor/__tests__/tabs.spec.ts

@@ -179,7 +179,7 @@ describe('clearHeadersFromTabs', () => {
     };
     const stateWithHeaders = {
       ...stateWithoutHeaders,
-      headers: `{ "authorization": "secret" }`,
+      headers: '{ "authorization": "secret" }',
     };
     storage.set(STORAGE_KEY, JSON.stringify(stateWithHeaders));
 

packages/graphiql-toolkit/src/create-fetcher/createFetcher.ts

@@ -60,7 +60,7 @@ export function createGraphiQLFetcher(options: CreateFetcherOptions): Fetcher {
           `Your GraphiQL createFetcher is not properly configured for websocket subscriptions yet. ${
             options.subscriptionUrl
               ? `Provided URL ${options.subscriptionUrl} failed`
-              : `Please provide subscriptionUrl, wsClient or legacyClient option first.`
+              : 'Please provide subscriptionUrl, wsClient or legacyClient option first.'
           }`,
         );
       }

packages/graphiql-toolkit/src/storage/__tests__/query.spec.ts

@@ -99,7 +99,7 @@ describe('QueryStore', () => {
       // tries to add an item, succeeds on 3rd try
       retryCounter = 0;
       shouldThrow = () => retryCounter < 3;
-      store.push({ query: `finalItem` });
+      store.push({ query: 'finalItem' });
 
       expect(store.items.length).toBe(8);
       expect(store.items[0].query).toBe('item13');
@@ -131,7 +131,7 @@ describe('QueryStore', () => {
       // tries to add an item, keeps failing
       retryCounter = 0;
       shouldThrow = () => true;
-      store.push({ query: `finalItem` });
+      store.push({ query: 'finalItem' });
 
       expect(store.items.length).toBe(10);
       // kept the items

packages/graphiql/cypress/e2e/errors.cy.ts

@@ -12,8 +12,9 @@ describe('Errors', () => {
            * we use to run the tests headless), the error in the latest Chrome
            * version is different!
            */
-          message: `Unexpected token 'B', "Bad Gateway" is not valid JSON`,
-          stack: `SyntaxError: Unexpected token 'B', "Bad Gateway" is not valid JSON`,
+          message: 'Unexpected token \'B\', "Bad Gateway" is not valid JSON',
+          stack:
+            'SyntaxError: Unexpected token \'B\', "Bad Gateway" is not valid JSON',
         },
       ],
     });

packages/graphiql/cypress/e2e/init.cy.ts

@@ -36,7 +36,7 @@ describe('GraphiQL On Initialization', () => {
       '.graphiql-response',
       '.graphiql-editor-tool',
     ];
-    cy.visit(`/`);
+    cy.visit('/');
     cy.get('.graphiql-query-editor').contains('# Welcome to GraphiQL');
     for (const cSelector of containers) {
       cy.get(cSelector).should('be.visible');
@@ -49,7 +49,7 @@ describe('GraphiQL On Initialization', () => {
     cy.assertQueryResult(mockSuccess);
   });
   it('Shows the expected error when the schema is invalid', () => {
-    cy.visit(`/?bad=true`);
+    cy.visit('/?bad=true');
     cy.get('section.result-window').should(element => {
       expect(element.get(0).innerText).to.contain('Names must');
     });

packages/graphiql/cypress/e2e/prettify.cy.ts

@@ -16,13 +16,13 @@ const prettifiedVariables = `{
   "a": 1
 }`;
 
-const uglyQuery = `{longDescriptionType {id}}`;
+const uglyQuery = '{longDescriptionType {id}}';
 
-const uglyVariables = `{"a": 1}`;
+const uglyVariables = '{"a": 1}';
 
-const brokenQuery = `longDescriptionType {id}}`;
+const brokenQuery = 'longDescriptionType {id}}';
 
-const brokenVariables = `"a": 1}`;
+const brokenVariables = '"a": 1}';
 
 describeOrSkip('GraphiQL Prettify', () => {
   it('Regular prettification', () => {

packages/graphiql/src/components/__tests__/fixtures.ts

@@ -1,4 +1,4 @@
-export const mockBadQuery = `bad {} query`;
+export const mockBadQuery = 'bad {} query';
 
 export const mockQuery1 = /* GraphQL */ `
   query Test($string: String) {

packages/graphiql/test/schema.js

@@ -146,7 +146,7 @@ const DeferrableObject = new GraphQLObjectType({
   fields: {
     normalString: {
       type: GraphQLString,
-      resolve: () => `Nice`,
+      resolve: () => 'Nice',
     },
     deferredString: {
       args: {

packages/graphql-language-service-server/src/MessageProcessor.ts

@@ -282,7 +282,7 @@ export class MessageProcessor {
 
   _logConfigError(errorMessage: string) {
     this._logger.error(
-      `WARNING: graphql-config error, only highlighting is enabled:\n` +
+      'WARNING: graphql-config error, only highlighting is enabled:\n' +
         errorMessage +
         `\nfor more information on using 'graphql-config' with 'graphql-language-service-server', \nsee the documentation at ${configDocLink}`,
     );

packages/graphql-language-service-server/src/__tests__/findGraphQLTags-test.ts

@@ -140,10 +140,10 @@ query Test {
   });
 
   it('finds queries with nested graphql.experimental template tag expression', async () => {
-    const text = `const query = graphql.experimental\` query {} \``;
+    const text = 'const query = graphql.experimental` query {} `';
 
     const contents = findGraphQLTags(text, '.ts');
-    expect(contents[0].template).toEqual(` query {} `);
+    expect(contents[0].template).toEqual(' query {} ');
   });
 
   it('finds queries with spec decorators', async () => {
@@ -155,7 +155,7 @@ query Test {
     `;
     const contents = findGraphQLTags(text, '.ts');
 
-    expect(contents[0].template).toEqual(` query {} `);
+    expect(contents[0].template).toEqual(' query {} ');
   });
 
   it('finds queries with es7 decorators', async () => {
@@ -206,7 +206,7 @@ class Todo2{}
     `;
     const contents = findGraphQLTags(text, '.ts');
 
-    expect(contents[0].template).toEqual(` query {} `);
+    expect(contents[0].template).toEqual(' query {} ');
   });
 
   it('finds queries with nested template tag expressions', async () => {
@@ -215,7 +215,7 @@ class Todo2{}
 }`;
 
     const contents = findGraphQLTags(text, '.ts');
-    expect(contents[0].template).toEqual(` query {} `);
+    expect(contents[0].template).toEqual(' query {} ');
   });
 
   it('finds queries with template tags inside call expressions', async () => {
@@ -224,7 +224,7 @@ class Todo2{}
 })`;
 
     const contents = findGraphQLTags(text, '.ts');
-    expect(contents[0].template).toEqual(` query {} `);
+    expect(contents[0].template).toEqual(' query {} ');
   });
 
   it('finds queries in tagged templates in Vue SFC using <script setup>', async () => {
@@ -327,7 +327,7 @@ query {id}`);
   });
 
   it('no crash in Svelte files without <script>', async () => {
-    const text = ``;
+    const text = '';
 
     const consoleErrorSpy = jest
       .spyOn(process.stderr, 'write')
@@ -344,7 +344,7 @@ query {id}`);
   });
 
   it('no crash in Svelte files with empty <script>', async () => {
-    const text = `<script></script>`;
+    const text = '<script></script>';
 
     const consoleErrorSpy = jest
       .spyOn(process.stderr, 'write')
@@ -361,7 +361,7 @@ query {id}`);
   });
 
   it('no crash in Svelte files with empty <script> (typescript)', async () => {
-    const text = `<script lang="ts"></script>`;
+    const text = '<script lang="ts"></script>';
 
     const consoleErrorSpy = jest
       .spyOn(process.stderr, 'write')
@@ -393,14 +393,14 @@ const query = graphql\`query myQuery {}\``;
     expect(contents[0].range.start.character).toEqual(18);
     expect(contents[0].range.end.line).toEqual(1);
     expect(contents[0].range.end.character).toEqual(28);
-    expect(contents[0].template).toEqual(` query {} `);
+    expect(contents[0].template).toEqual(' query {} ');
 
     // and the second string, with correct positional information!
     expect(contents[1].range.start.line).toEqual(3);
     expect(contents[1].range.start.character).toEqual(22);
     expect(contents[1].range.end.line).toEqual(3);
     expect(contents[1].range.end.character).toEqual(38);
-    expect(contents[1].template).toEqual(`query myQuery {}`);
+    expect(contents[1].template).toEqual('query myQuery {}');
   });
 
   it('ignores non gql tagged templates', async () => {

packages/graphql-language-service/src/interface/__tests__/getAutocompleteSuggestions-test.ts

@@ -120,7 +120,7 @@ describe('getAutocompleteSuggestions', () => {
     it('provides correct sortText response', () => {
       const result = getAutocompleteSuggestions(
         schema,
-        `{ h`,
+        '{ h',
         new Position(0, 3),
       ).map(({ sortText, label, detail }) => ({ sortText, label, detail }));
       expect(result).toEqual([
@@ -597,7 +597,7 @@ describe('getAutocompleteSuggestions', () => {
       ]));
     it('provides correct suggestions on object fields', () =>
       expect(
-        testSuggestions(`type Type {\n  aField: s`, new Position(0, 23), [], {
+        testSuggestions('type Type {\n  aField: s', new Position(0, 23), [], {
           uri: 'schema.graphqls',
         }),
       ).toEqual([
@@ -609,7 +609,7 @@ describe('getAutocompleteSuggestions', () => {
       ]));
     it('provides correct suggestions on object fields that are arrays', () =>
       expect(
-        testSuggestions(`type Type {\n  aField: []`, new Position(0, 25), [], {
+        testSuggestions('type Type {\n  aField: []', new Position(0, 25), [], {
           uri: 'schema.graphqls',
         }),
       ).toEqual([
@@ -628,7 +628,7 @@ describe('getAutocompleteSuggestions', () => {
       ]));
     it('provides correct suggestions on input object fields', () =>
       expect(
-        testSuggestions(`input Type {\n  aField: s`, new Position(0, 23), [], {
+        testSuggestions('input Type {\n  aField: s', new Position(0, 23), [], {
           uri: 'schema.graphqls',
         }),
       ).toEqual([{ label: 'Episode' }, { label: 'String' }]));

packages/graphql-language-service/src/interface/__tests__/getDiagnostics-test.ts

@@ -87,7 +87,7 @@ describe('getDiagnostics', () => {
             for (const definition of node.definitions) {
               // add a custom error to every definition
               validationContext.reportError(
-                new GraphQLError(`This is a custom error.`, definition),
+                new GraphQLError('This is a custom error.', definition),
               );
             }
             return false;
@@ -162,7 +162,7 @@ describe('getDiagnostics', () => {
         }
       },
     });
-    const errors = getDiagnostics(`query hero { hero { id } }`, schema, [
+    const errors = getDiagnostics('query hero { hero { id } }', schema, [
       noQueryRule,
     ]);
     expect(errors).toHaveLength(1);
@@ -171,7 +171,7 @@ describe('getDiagnostics', () => {
 
   it('validates with external fragments', () => {
     const errors = getDiagnostics(
-      `query hero { hero { ...HeroGuy } }`,
+      'query hero { hero { ...HeroGuy } }',
       schema,
       [],
       false,
@@ -189,7 +189,7 @@ describe('getDiagnostics', () => {
       }
     `).definitions as FragmentDefinitionNode[];
     const errors = getDiagnostics(
-      `query hero { hero { ...Person ...Person2 } }`,
+      'query hero { hero { ...Person ...Person2 } }',
       schema,
       [],
       false,

packages/graphql-language-service/src/interface/getAutocompleteSuggestions.ts

@@ -450,7 +450,7 @@ export function getAutocompleteSuggestions(
   return [];
 }
 
-const insertSuffix = ` {\n  $1\n}`;
+const insertSuffix = ' {\n  $1\n}';
 
 /**
  * Choose carefully when to insert the `insertText`!