not producing same results as prettier-eslint-cli #142
Comments
|
@ci-vamp What does your tsconfig file look like? |
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"jsx": "react-native",
"lib": ["dom", "esnext"],
"moduleResolution": "node",
"allowJs": true,
"noEmit": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"strict": true,
"baseUrl": ".",
"paths": {
"@features/*": ["features/*"],
"@utils/*": ["utils/*"],
"@assets/*": ["assets/*"],
"@config/*": ["config/*"],
"@components/*": ["components/*"],
"@providers/*": ["providers/*"],
"@hooks/*": ["hooks/*"],
"@api": ["api/index"],
"@navigation": ["navigation/index"],
"@types": ["types/index"],
"@screens": ["screens/index"]
}
},
"extends": "expo/tsconfig.base"
} |
|
I also noticed it (the extension) is not respecting these rules about commas and line breaks for assignments (with "operator-linebreak": [
"error",
"after",
{
"overrides": {
"=": "none"
}
}
],
"comma-dangle": [
"error",
"always-multiline"
]
|
|
@idahogurl i trimmed out everything to a minimal reproducible example repo here. i cant understand what is causing it. looking at the extension source its a wrapper around thank you for the wonderful extension. |
|
@ci-vamp I was able to reproduce and fix your issue. The fix is described here: |
|
@idahogurl i tried this and it is still having the same behavior. i have changed it to
|
|
here is a direct link to the new eslint config file i am also not getting any errors in the extension output (as suggested by #27)
|
|
@idahogurl im sorry it did fix it! but in case anyone else runs into this i had to:
brilliant. thank you very much |
|
@idahogurl sorry to bother but it started happening again. i noticed it happening in my main project and went back to the demo repo to see if someone else on my team had modified something. i did not change any settings since you sorted me out with converting eslint to a js file. here is a video in action in the demo repo. is there a way to enable debugging/tracing of what the extension is doing? im close to just abandoning the new line destructuring, seems to be the source of all this :[ eslint-demo-720.mov |
|
@ci-vamp Unfortunately there is not a way to turn on debugging. I have thought about that in the past. I'd have to create a setting in the plugin so it could pass it to Prettier ESLint. There is this plugin https://www.npmjs.com/package/eslint-plugin-newline-destructuring. You shouldn't need it though because You could clone my repository, build the extension in dev mode, and then use the VS Code extension debugger but it's not exactly intuitive. I'll reclone your demo repo, apply the fix and see if I can't reproduce it again. |
|
@idahogurl ya it's so strange. Especially because it got fixed after your suggestion. But now it randomly came back. I tried wiping / reinstalling node modules, removing / reinstalling the extension, quitting / refreshing vscode. Nothing worked to sort it out. I’m really perplexed. That plugin is the one I'm using now. Like you said it works with the CLI but somehow the extension doesn't (despite being a proxy). What a mystery. If there's anything I can do to help debug please let me know. I’m not familiar with extension dev but know node/js/ts pretty well. |
|
@ci-vamp Finally figured it out!! Oh it was painful. 😬 The fix is that you had |
|
oh wow what a catch. this did fix nearly all of it. now it is just hung up on import/order rules :[ import-order-720.mov |
|
@ci-vamp I can't reproduce the issue. It keeps the line for me. Can you add more to the sample repo so I can reproduce it? |
|
@idahogurl absolutely. i have updated the repo with a sample i also included the tsconfig dir change (forgot to commit it last time) and added it is committed in a "broken" state so you can see the effect of saving. here is a recording of the demo. when i hit save it corrects everything except the issue-in-demo-720.mov |
|
also if it helps my partner has introduced a temporary workaround for us using this extension rohit-gohri.format-code-action. they have done a "poor-man's" version of your extension, you can see in the description their motivation was the same as yours. i am not a fan of it because it has some sort of memory leak / CPU overload where it starts shredding battery life. and, tbh, i have used your extension for a few years now and much prefer to stick with it. i can confirm that using their extension with note: they require that {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
"editor.formatOnPaste": false, // required
"editor.formatOnType": false, // required
"editor.formatOnSave": false, // optional
"editor.formatOnSaveMode": "file", // required to format on save
"editor.codeActionsOnSave": ["source.formatDocument", "source.fixAll.eslint"],
...
} |
|
@ci-vamp Thank you for your loyalty and patience. You must be a Hufflepuff like me. 😆 I figured out the issue. It's another project: '<root>/tsconfig.json',change to project: `${__dirname}/tsconfig.json`,Also, you don't need extends: [
'plugin:react/recommended',
'airbnb',
'airbnb/hooks',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:eslint-comments/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
'prettier',
],The |
|
yer a wezard id @idahogurl its working wonderfully. also of note is i had autosave on delay. i know you had that as a suggestion but i think it should be a requirement to use autosave on focus / window change |
|
ok so it randomly started happening again for my partner. only diff we could find was was on vscode 1.75.1 as soon as i updated to 1.75.1 started happening to me. i was about to file a bug report when i realized that even after downgrading back to 1.74.3 it was still happening! i did a complete wipe of vscode and it didnt fix anything. lost all my settings :[ im dumb however! i got the fix and it was based on what you had suggested before. at the very end of the eslintrc.js was this. their own docs suggest settings: {
'import/parsers': {
'@typescript-eslint/parser': ['.ts', '.tsx'],
},
'import/resolver': {
typescript: {
alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
// Choose from one of the "project" configs below or omit to use <root>/tsconfig.json by default
// use <root>/path/to/folder/tsconfig.json
project: `${__dirname}/tsconfig.json`,
},
},
}, |
|
full eslint for reference and you were right i was able to remove the module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:react/recommended',
'airbnb',
'airbnb/hooks',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:eslint-comments/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['api/*', '.eslintrc.js', '*.config.ts', '*.config.js'],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
project: `${__dirname}/tsconfig.json`,
tsconfigRootDir: __dirname,
},
plugins: [
'import',
'react',
'@typescript-eslint',
'react-native',
'eslint-comments',
'eslint-plugin-newline-destructuring',
],
rules: {
'max-classes-per-file': ['off'],
'import/prefer-default-export': ['off'],
'react/function-component-definition': ['off'],
'import/extensions': ['error', 'never'],
'import/no-unresolved': 'error',
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'react/jsx-filename-extension': [
2,
{
extensions: ['.jsx', '.tsx'],
},
],
'@typescript-eslint/no-unused-vars': ['error', 'all'],
'@typescript-eslint/no-explicit-any': ['error', { ignoreRestArgs: true }],
'padding-line-between-statements': [
'error',
{
blankLine: 'always',
prev: '*',
next: 'return',
},
],
'@typescript-eslint/explicit-module-boundary-types': 'off',
'jest/valid-title': 'off',
'import/order': [
'error',
{
'newlines-between': 'always',
groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type'],
alphabetize: {
order: 'ignore',
caseInsensitive: false,
},
},
],
'newline-destructuring/newline': [
'error',
{
items: 2,
maxLength: 100,
consistent: true,
},
],
'operator-linebreak': [
'error',
'after',
{
overrides: {
'=': 'none',
},
},
],
'no-multi-spaces': 'error',
indent: 'off',
'@typescript-eslint/indent': ['error', 2],
'comma-dangle': ['error', 'always-multiline'],
'consistent-return': 'off',
},
settings: {
'import/parsers': {
'@typescript-eslint/parser': ['.ts', '.tsx'],
},
'import/resolver': {
typescript: {
alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
project: `${__dirname}/tsconfig.json`,
},
},
},
}; |
Describe the bug
i have prettier-eslint vscode set to format on save. it is not producing the same results as the prettier-eslint-cli.
i use the cli to check for formatting differences in CI during a PR.
To Reproduce
Steps to reproduce the behavior:
prettier-eslint \"**/*.{ts,tsx}\" --writeExpected behavior
output of prettier-eslint vscode extension format on save is the same as running the format script:
Example Project
happening in a private repo
Screenshots
Versions (please complete the following information):
"prettier": "^2.8.0""eslint": "^8.14.0"System Specifications (please complete the following information):
Additional context
{ "arrowParens": "always", "bracketSpacing": true, "jsxBracketSameLine": false, "jsxSingleQuote": false, "quoteProps": "as-needed", "singleQuote": true, "semi": true, "printWidth": 100, "useTabs": false, "tabWidth": 2, "trailingComma": "es5" }{ "env": { "browser": true, "es2021": true }, "extends": [ "plugin:react/recommended", "airbnb", "airbnb/hooks", "plugin:import/errors", "plugin:import/warnings", "plugin:eslint-comments/recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended", "prettier" ], "ignorePatterns": [ "api/*" ], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaFeatures": { "jsx": true }, "ecmaVersion": 12, "sourceType": "module", "project": "./tsconfig.json", "tsConfigRootDir": "." }, "plugins": [ "import", "react", "@typescript-eslint", "react-native", "eslint-comments", "eslint-plugin-newline-destructuring" ], "rules": { "import/extensions": [ "error", "never" ], "import/no-unresolved": "error", "no-use-before-define": "off", "@typescript-eslint/no-use-before-define": "off", "react/jsx-filename-extension": [ 2, { "extensions": [ ".jsx", ".tsx" ] } ], "@typescript-eslint/no-unused-vars": ["error", "all"], "@typescript-eslint/no-explicit-any": ["error", { "ignoreRestArgs": true }], "padding-line-between-statements": [ "error", { "blankLine": "always", "prev": "*", "next": "return" } ], "@typescript-eslint/explicit-module-boundary-types": "off", "eslint-comments/disable-enable-pair": [ "error", { "allowWholeFile": true } ], "eslint-comments/no-unused-disable": "warn", "jest/valid-title": "off", "import/order": [ "error", { "newlines-between": "always", "groups": [ "builtin", "external", "internal", "parent", "sibling", "index", "object", "type" ], "alphabetize": { "order": "ignore", "caseInsensitive": false } } ], "newline-destructuring/newline": [ "error", { "items": 2 } ], "operator-linebreak": [ "error", "after", { "overrides": { "=": "none" } } ], "no-multi-spaces": "error", "indent": "off", "@typescript-eslint/indent": [ "error", 2 ], "comma-dangle": [ "error", "always-multiline" ] }, "settings": { "import/parsers": { "@typescript-eslint/parser": [ ".ts", ".tsx" ] }, "import/resolver": { "typescript": { "alwaysTryTypes": true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist` // Choose from one of the "project" configs below or omit to use <root>/tsconfig.json by default // use <root>/path/to/folder/tsconfig.json "project": "<root>/tsconfig.json" } } } }outputs correctly without error, can add if needed (it is very long output)
The text was updated successfully, but these errors were encountered: