I'm brand new to the world of prettier, typescript, and eslint. Even though most of the integration is going smoothly, I am facing an issue with multi-line destructuring objects.
Prettier Version 1.19.1 Playground link
Input:
const {
ciq,
drawingMenuX,
drawingMenuY,
selectedDrawing,
} = store.chartStore;
Output:
const { ciq, drawingMenuX, drawingMenuY, selectedDrawing } = store.chartStore;
Expected behavior:
const {
ciq,
drawingMenuX,
drawingMenuY,
selectedDrawing,
} = store.chartStore;
I would like to maintain a multi-line format in the object destructuring as suggested in Prettier Rationale for Multi-line Objects.
This works perfectly fine with normal objects but not with object destructuring.
How can I resolve this issue? Do I need to manually adjust each line?
package.json
"@typescript-eslint/eslint-plugin": "^2.11.0",
"@typescript-eslint/parser": "^2.11.0",
"eslint": "^6.7.2",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.7.0",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-react-hooks": "^1.7.0",
"prettier": "^1.19.1",
.eslintrc.js
module.exports = {
env: {
browser: true,
es6: true,
},
extends: ['plugin:react/recommended', 'plugin:prettier/recommended', 'airbnb'],
plugins: ['react', '@typescript-eslint'],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
},
},
rules: {
'react/jsx-filename-extension': [
1,
{
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
],
...
(rules continued)
...
...
};