idahogurl / vs-code-prettier-eslint

A Visual Studio Code Extension to format JavaScript and TypeScript code using the prettier-eslint package.
MIT License
195 stars 48 forks source link

Extension inserts unwanted semicolon and linebreak upon pasting into a non ts/js file #139

Closed OoDeLally closed 1 year ago

OoDeLally commented 1 year ago

Describe the bug

In a non-js/ts file, when pasting a piece of text, the text is pasted, and a semicolon as well as linebreak are inserted after the pasted text. This issue does not occur in TS/JS files. I've seen it only in other files (e.g. .md, .yml, etc)

To Reproduce Inside a README.md image After pasting image You can see the ;\n was not part of the clipboard, it is nevertheless added.

Interestingly, the issue doesnt occur when the pasted content has spaces in it: image image In such case we get a console error

Error: Unexpected keyword or identifier. (1:1)
> 1 | text to paste
    | ^ 
SyntaxError: Unexpected keyword or identifier. (1:1)
> 1 | text to paste
    | ^
    at D (/home/me/project/node_modules/prettier/parser-typescript.js:1:17162)
    at LT (/home/me/project/node_modules/prettier/parser-typescript.js:257:10765)
    at Object.RT [as parse] (/home/me/project/node_modules/prettier/parser-typescript.js:257:11074)
    at Object.parse (/home/me/project/node_modules/prettier/index.js:7515:23)
    at coreFormat (/home/me/project/node_modules/prettier/index.js:8829:18)
    at formatWithCursor2 (/home/me/project/node_modules/prettier/index.js:9021:18)
    at /home/me/project/node_modules/prettier/index.js:38169:12
    at Object.format (/home/me/project/node_modules/prettier/index.js:38183:12)
    at /home/me/.vscode/extensions/rvest.vs-code-prettier-eslint-5.0.4/dist/extension.js:184:131
    at Lge (/home/me/.vscode/extensions/rvest.vs-code-prettier-eslint-5.0.4/dist/extension.js:180:1160)

So it seems like even if the file is NOT a JS/TS, the extension tries to parse the content of the clipboard and do some magic with it. The space in the content makes this unwanted behavior crash.

Versions (please complete the following information):

System Specifications (please complete the following information):

idahogurl commented 1 year ago

@OoDeLally Do you have "Format on Paste" turned on?

OoDeLally commented 1 year ago

Yes I do.

idahogurl commented 1 year ago

@OoDeLally I cannot reproduce the behavior. Could you provide a minimal example repository with the same ESLint and/or Prettier config files. Or at least post your package.json, .eslintrc, and .prettierrc? Make sure they are text not screenshoots.

On a side note, my extension does not support Format on Paste only Format on Save because VS Code will only send the text you paste not the entire file contents. I haven't figured out how to support Format on Paste as no one has requested it as a feature.

OoDeLally commented 1 year ago
{
    "version": "0.1.0",
    "description": "",
    "private": true,
    "license": "UNLICENSED",
    "scripts": {
    },
    "dependencies": {
        "@aws-sdk/client-s3": "^3.218.0",
        "@chainlink/solana-sdk": "^0.2.2",
        "@elastic/elasticsearch": "^8.5.0",
        "@golevelup/nestjs-webhooks": "^0.2.14",
        "@graphql-authz/apollo-server-plugin": "^2.0.3",
        "@graphql-authz/core": "^1.3.0",
        "@graphql-authz/directive": "^1.1.2",
        "@metaplex-foundation/js": "^0.15.0",
        "@nestjs/apollo": "^10.0.19",
        "@nestjs/axios": "^0.1.0",
        "@nestjs/common": "^9.0.0",
        "@nestjs/core": "^9.0.0",
        "@nestjs/elasticsearch": "^9.0.0",
        "@nestjs/event-emitter": "^1.3.1",
        "@nestjs/graphql": "^10.0.21",
        "@nestjs/jwt": "^9.0.0",
        "@nestjs/mongoose": "^9.2.0",
        "@nestjs/passport": "^9.0.0",
        "@nestjs/platform-express": "^9.0.0",
        "@nestjs/schedule": "^2.1.0",
        "@project-serum/anchor": "^0.26.0",
        "@sentry/node": "^7.29.0",
        "@sentry/tracing": "^7.28.1",
        "apollo-server-express": "^3.11.1",
        "axios": "^1.1.3",
        "body-parser": "^1.20.0",
        "class-transformer": "^0.5.1",
        "class-validator": "^0.13.2",
        "dataloader": "^2.1.0",
        "dotenv": "^16.0.3",
        "ethers": "^5.6.9",
        "express": "^4.18.1",
        "fast-shuffle": "^5.0.2",
        "graphql": "^16.6.0",
        "graphql-scalar": "^0.0.11",
        "graphql-scalars": "^1.18.0",
        "graphql-subscriptions": "^2.0.0",
        "graphql-upload": "^11.0.0",
        "graphql-ws": "^5.10.2",
        "helmet": "^5.1.1",
        "lodash": "^4.17.21",
        "migrate-mongo": "^9.0.0",
        "moment": "^2.29.4",
        "mongoose": "^6.5.2",
        "nanoid": "^3.3.4",
        "node-mailjet": "^6.0.0",
        "passport": "^0.6.0",
        "passport-jwt": "^4.0.0",
        "reflect-metadata": "^0.1.13",
        "rimraf": "^3.0.2",
        "rxjs": "^7.2.0",
        "sharp": "^0.31.0",
        "stream-mime-type": "^1.0.2",
        "subscriptions-transport-ws": "^0.11.0",
        "successful": "^1.3.1",
        "tweetnacl": "^1.0.3",
        "zod": "^3.18.0"
    },
    "devDependencies": {
        "@elastic/elasticsearch-mock": "^2.0.0",
        "@nestjs/cli": "^9.0.0",
        "@nestjs/schematics": "^9.0.0",
        "@nestjs/testing": "^9.2.0",
        "@types/bs58": "^4.0.1",
        "@types/express": "^4.17.13",
        "@types/graphql-upload": "^8.0.11",
        "@types/jest": "^29.2.3",
        "@types/lodash": "^4.14.184",
        "@types/migrate-mongo": "^8.2.0",
        "@types/node": "^16.0.0",
        "@types/sharp": "^0.31.0",
        "@types/supertest": "^2.0.11",
        "@types/uuid": "^8.3.4",
        "@typescript-eslint/eslint-plugin": "^5.35.1",
        "@typescript-eslint/parser": "^5.35.1",
        "csv-parser": "3.0.0",
        "eslint": "^8.23.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-import": "^2.26.0",
        "eslint-plugin-jest": "^27.1.5",
        "eslint-plugin-prettier": "^4.2.1",
        "fs-capacitor": "^8.0.0",
        "jest": "^29.3.1",
        "jest-extended": "^3.2.0",
        "jest-mock-extended": "^3.0.1",
        "mongodb-memory-server": "^8.10.0",
        "portfinder": "^1.0.32",
        "prettier": "^2.3.2",
        "prettier-plugin-organize-imports": "^3.1.0",
        "source-map-support": "^0.5.20",
        "supertest": "^6.1.3",
        "ts-jest": "^29.0.3",
        "ts-loader": "^9.2.3",
        "ts-node": "^10.0.0",
        "tsconfig-paths": "4.0.0",
        "typescript": "^4.9.4",
        "webpack": "^5.74.0"
    },
    "overrides": {
        "graphql": "$graphql"
    }
}
module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json'],
  },
  plugins: ['@typescript-eslint/eslint-plugin', 'jest'],
  extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  rules: {
    'object-shorthand': 'warn',
    'no-useless-rename': 'warn',
    'prettier/prettier': 'warn',
    '@typescript-eslint/no-unused-vars': [
      'warn',
      { varsIgnorePattern: '_$', argsIgnorePattern: '_$' },
    ],
    'object-curly-spacing': ['warn', 'always'],
    'require-await': 'warn',
    '@typescript-eslint/explicit-module-boundary-types': 'warn',
    '@typescript-eslint/no-empty-function': 'warn',
    '@typescript-eslint/no-empty-interface': 'warn',
    'prefer-const': 'warn',
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/switch-exhaustiveness-check': 'error',
    '@typescript-eslint/no-non-null-assertion': 'off',
    'jest/no-disabled-tests': 'warn',
    'jest/no-focused-tests': 'error',
    'jest/no-identical-title': 'error',
    'jest/prefer-to-have-length': 'warn',
    '@typescript-eslint/no-inferrable-types': 'warn',
    'jest/valid-expect': 'error',
    '@typescript-eslint/padding-line-between-statements': [
      'warn',
      { blankLine: 'always', prev: 'class', next: 'class' },
      { blankLine: 'always', prev: 'export', next: 'export' },
      { blankLine: 'always', prev: 'function', next: 'function' },
    ],
  },
  overrides: [
    {
      files: ['**/*.spec.ts'],
      rules: {
        'require-await': 'off',
        '@typescript-eslint/no-empty-function': 'off',
      },
    },
  ],
};
{
  "trailingComma": "all",
  "singleQuote": true,
  "jsxSingleQuote": true,
  "bracketSpacing": true,
  "printWidth": 100,
  "parser": "typescript"
}
shellscape commented 1 year ago

Ran into this as well, but with these settings:

  "editor.formatOnPaste": false, // required
  "editor.formatOnType": false, // required
  "editor.formatOnSave": true, // optional
  "editor.formatOnSaveMode": "file", // required to format on save

What's odd, and differs from the original issue description, is that it happens within .ts files for me, but not for .md or .json for example. Disabling the extension and reloading the window resolves the issue.

Update:

I had the following setting in settings.json:

"[typescript]": {
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},

I'm not entirely sure why it was there, but commenting that out and reloading the window got rid of the weird semicolon paste issue and a few other odd pasting format issues.

idahogurl commented 1 year ago

@shellscape After commenting out the following, are you sure it's using my extension to Format on Save? This setting tells VS Code what formatter to use for Format on Save. I was on vacation so I haven't tried to reproduce with the config files @OoDeLally posted.

"[typescript]": {
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
},
shellscape commented 1 year ago

Yes. I disabled all other extensions that could have had an effect. With that line commented out, things behave as expected. With that line uncommented, I experience the same behavior described in the issue. This is how my config looks at the moment:

  // "[typescript]": {
  //   "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
  // },
  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint", // required

It may be that with both of those lines uncommented, there is a conflict of sorts.

idahogurl commented 1 year ago

@OoDeLally Could I get a copy of your settings.json file? It is either located at .vscode/settings.json or do the following:

  1. Open the command palette in VS Code by typing: CMD + SHIFT + P (Mac OS) CTRL + SHIFT + P (Windows)
  2. In the command palette type Preferences: Open User Settings (JSON).
OoDeLally commented 1 year ago
{
    "workbench.startupEditor": "newUntitledFile",
    "editor.minimap.enabled": false,
    "editor.formatOnPaste": true,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.snippetSuggestions": "top",
    "workbench.colorTheme": "Monokai",
    "settingsSync.keybindingsPerPlatform": false,
    "sync.gist": "7853cae758e28642dd3b480f17793def",
    "files.exclude": {
        "**/.expo": true,
        "**/.expo-shared": true,
        "**/.next": true,
        "**/build": true,
        "**/dist": true,
        "**/node_modules": true,
        "**/package-lock.json": true,
        "**/pnpm-lock.yaml": true,
        "**/yarn-error.log": true,
        "**/yarn.lock": true
    },
    "files.watcherExclude": {
        "**/.expo": true,
        "**/.expo-shared": true,
        "**/.next": true,
        "**/build/**": true,
        "**/dist/**": true,
        "**/package-lock.json": true,
        "**/yarn-error.log": true,
        "**/yarn.lock": true
    },
    "search.exclude": {
        "**/.expo": true,
        "**/.expo-shared": true,
        "**/.git": true,
        "**/.next": true,
        "**/build": true,
        "**/dist": true,
        "**/package-lock.json": true,
        "**/yarn-error.log": true,
        "**/yarn.lock": true
    },
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "javascript.updateImportsOnFileMove.enabled": "always",
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "explorer.confirmDragAndDrop": false,
    "explorer.confirmDelete": false,
    "javascript.preferences.quoteStyle": "single",
    "typescript.preferences.quoteStyle": "single",
    "editor.tabSize": 2,
    "turboConsoleLog.insertEnclosingFunction": false,
    "turboConsoleLog.insertEnclosingClass": false,
    "turboConsoleLog.includeFileNameAndLineNum": false,
    "turboConsoleLog.logMessagePrefix": "",
    "turboConsoleLog.delimiterInsideMessage": " ",
    "explorer.openEditors.visible": 0,
    "json.maxItemsComputed": 100000,
    "workspaceSidebar.depth": 5,
    "js/ts.implicitProjectConfig.experimentalDecorators": true,
    "editor.acceptSuggestionOnCommitCharacter": false,
    "editor.wordWrapColumn": 100,
    "editor.wordWrap": "on",
    "tabnine.experimentalAutoImports": true,
    "emmet.showAbbreviationSuggestions": false,
    "emmet.excludeLanguages": [

        "javascript",
        "typescript",
        "typescriptreact",
        "javascriptreact",
        "markdown"
    ],
    "editor.lightbulb.enabled": false,
    "eslint.codeAction.showDocumentation": {
        "enable": false
    },
    "typescript.tsserver.maxTsServerMemory": 8192,
    "security.workspace.trust.untrustedFiles": "open",
    "[json]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    },
    "javascript.preferences.importModuleSpecifier": "relative",
    "editor.unicodeHighlight.nonBasicASCII": false,
    "editor.unicodeHighlight.ambiguousCharacters": false,
    "files.associations": {
        "*.ts": "typescript"
    },
    "git.mergeEditor": false,
    "typescript.preferences.importModuleSpecifier": "relative",
    "window.zoomLevel": 1
}
idahogurl commented 1 year ago

@OoDeLally @shellscape is right. If you remove these lines

"editor.formatOnPaste": true,
    "[json]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    },

and put

  "editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
  "editor.formatOnPaste": false, // required 
  "editor.formatOnType": false, // required
  "editor.formatOnSave": true, // optional 
  "editor.formatOnSaveMode": "file", // required to format on save
  "files.autoSave": "onFocusChange" // optional but recommended

instead. This will make the file format on save.

issue-to-branch[bot] commented 1 year ago

Click here to create a branch for this issue

issue-to-branch[bot] commented 1 year ago

Branch 139-extension-inserts-unwanted-semicolon-and created for this issue. Run command below in your terminal to checkout branch.
git fetch && git checkout 139-extension-inserts-unwanted-semicolon-and

github-actions[bot] commented 1 year ago

This issue is stale because it has been open for 14 days with no activity.

github-actions[bot] commented 1 year ago

This issue was closed because it has been inactive for 14 days since being marked as stale.

issue-to-branch[bot] commented 2 months ago

Branch 139-extension-inserts-unwanted-semicolon-and created for this issue. Run command below in your terminal to checkout branch.
git fetch && git checkout 139-extension-inserts-unwanted-semicolon-and