I use vim as IDE for typescript project.
import { FlightInfo } from './FlightInfo'
import { InfoBlockProps, InfoRowProps, INavigationFlightOfferDataProps } from './interfaces'
import { getDiscountData, formatDataByServicesType, selectAdministrationFee } from './functions'
Also, I use ts-lint rule for check sorting:
...
ordered-imports": [
true,
{
"import-sources-order": "lowercase-first",
"named-imports-order": "lowercase-first"
}
],
...
And get errors:
ERROR: 11:1 ordered-imports Import sources within a group must be alphabetized.
ERROR: 11:10 ordered-imports Named imports must be alphabetized.
ERROR: 12:1 ordered-imports Import sources within a group must be alphabetized.
ERROR: 12:10 ordered-imports Named imports must be alphabetized.
I am searching for a solution or plugin for fix this sorting errors.
In this situation, for me very well works ts-lint --fix -c ./ts-congig.json my-file.ts command.
Related
I'm trying to prevent any import from "private files" that are specified by prefixing them with an underscore.
As an example, I would like to prevent importing file patters as follows:
import {foo} from '_file';
import {foo} from './_file';
import {foo} from './dialog/_file';
import {foo} from '#alias_root/src/framework/dialog/_file';
To do so, I've used the following rules:
{
'no-restricted-imports': ['error', {
patterns: [{
group: ['_*'],
message: 'Import files starting with an underline are private',
}],
}],
}
Unfortunately this does not seem to catch all the cases I would like to prevent and I'm wondering what I'm missing or how to exactly use this rule.
According to the eslint no-restricted-imports documentation
When using the object form, you can also specify an array of
gitignore-style patterns:
"no-restricted-imports": ["error", {
"paths": ["import1", "import2"],
"patterns": ["import1/private/*", "import2/*", "!import2/good"] }]
(Emphasis mine)
What I'm trying to do is restrict imports from parent index files - as this is causing issues with cyclical dependencies (I am also using the import/no-cycle rule, but it makes sense to also explicitly use this rule.)
That is, I want to ban imports like:
import foo from "../..";
import bar from "../../..";
I also want to ban imports like:
import a from "../Components";
but not like
import b from "../Components/Foo";
I have tried using this rule:
'no-restricted-imports': [
'error',
{
patterns: [
'**/..',
'**/Components'
]
},
But this causes on errors on imports of:
import b from "../Components/Foo";
Is there a way to specify 'end of string' in a gitignore style pattern?
First, make sure you don't have set import/no-relative-parent-imports, or any ../ import would fail.
Second, if this really follows .gitignore rules, you cannot have rules for folders (like **/.. or **/Components).
Because, once you ignore a folder, any other rule for elements inside that folder would be ignored.
Try:
'no-restricted-imports': [
'error',
{
patterns: [
'**/../*',
'!**/../Components',
'**/../Components/*',
'!**/../Components/Foo',
]
},
I have the following configuration in my jsconfig.json file:
{
"compilerOptions": {
"baseUrl": "./src"
},
"include": ["src"]
}
Which lets me do this:
import { App } from 'components'
import * as actions from 'actions/app.actions'
Instead of this:
import { App } from '../components'
import * as actions from '../actions/app.actions'
To get started with unit testing, I've created a simple App.test.jsx in src/components/tests
import { render } from '#testing-library/react'
import { App } from 'components'
it('renders without crashing', () => {
render(<App />)
})
However, when I run yarn test (which is sugar for react-scripts test), it throws with this ugly error:
FAIL src/components/tests/App.test.jsx
● Test suite failed to run
Your application tried to access components, but it isn't declared in your dependencies;
this makes the require call ambiguous and unsound.
Required package: components (via "components")
Required by: C:\Users\Summer\Code\sandbox\src\components\tests\
23714 | enumerable: false
23715 | };
> 23716 | return Object.defineProperties(new Error(message), {
| ^
23717 | code: { ...propertySpec,
23718 | value: code
23719 | },
at internalTools_makeError (.pnp.js:23716:34)
at resolveToUnqualified (.pnp.js:24670:23)
at resolveRequest (.pnp.js:24768:29)
at Object.resolveRequest (.pnp.js:24846:26)
It seems like Jest (or Yarn?) thinks components is a node package, because it's not aware of the absolute imports setting in my jsconfig.json. Is there a way to make it aware? Or do I have to choose between 0% coverage and relative imports?
I've tried entering "moduleNameMapper" under "jest" in my package.json like the documentation explains, but it didn't help. I got the same error + one more after it.
I've also tried changing components in the test file to ../components but then it complains about actions/app.actions which is inside the <App /> component.
Module name mapper config:
/* package.json */
{
/* ... */
"jest": {
"moduleNameMapper": {
"actions(.*)$": "<rootDir>/src/actions$1",
"assets(.*)$": "<rootDir>/src/assets$1",
"components(.*)$": "<rootDir>/src/components$1",
"mocks(.*)$": "<rootDir>/src/mocks$1",
"pages(.*)$": "<rootDir>/src/pages$1",
"reducers(.*)$": "<rootDir>/src/reducers$1",
"scss(.*)$": "<rootDir>/src/scss$1",
"store(.*)$": "<rootDir>/src/store$1",
"themes(.*)$": "<rootDir>/src/themes$1",
"api": "<rootDir>/src/api.js",
}
}
}
This is because Yarn takes control of the resolution pipeline, and thus isn't aware of resolution directives coming from third-party configuration (like moduleNameMapper).
This isn't to say you have no options, though - specifically, the fix here is to avoid moduleNameMapper, and instead leverage the builtin link: dependency protocol. This has other advantages, such as being compatible with all tools (TS, Jest, ESLint, ...) without need to port your aliases to each configuration format.
See also: Why is the link: protocol recommended over aliases for path mapping?
I am trying to import files like this but getting error: Expected 'multiple' syntax before 'single' syntax
import { Component, Prop, Vue } from 'vue-property-decorator';
import { getModule } from 'vuex-module-decorators';
import { ApiException, IProduct, IProductCategory } from '#/services'; // error here
import { INavs } from '#/types';
Rule config:
'sort-imports': ['error', {
'ignoreCase': false,
'ignoreDeclarationSort': false,
'ignoreMemberSort': false,
'memberSyntaxSortOrder': ['none', 'all', 'multiple', 'single']
}]
import { ApiException, IProduct, IProductCategory } from '#/services'; is importing multiple (three) exports.
Both import { getModule } from 'vuex-module-decorators'; and import { INavs } from '#/types'; are only importing a single named export.
That error will go way if you move import { ApiException, IProduct, IProductCategory } up one line so it's above the single imports.
This is configured in your settings where it says 'memberSyntaxSortOrder': ['none', 'all', 'multiple', 'single'] because 'multiple' is listed before 'single'.
You can read more about it in the eslint documentation here https://eslint.org/docs/rules/sort-imports
Ran into this too looking for a CI solution for reordering multiple imports, since ESLint --fix only supports multiple members on a single line; i.e. autofixing unsupported when spread over multiple lines - e.g. from a low Prettier printWidth of ~80.
eslint-plugin-simple-import-sort works great, fixed the errors after amending config from the docs:
Make sure not to use other sorting rules at the same time:
[sort-imports]
[import/order]
To resolve this issue I'll recommend modifying your .eslintrc.json setting
"sort-imports": ["error", {
"ignoreCase": false,
"ignoreDeclarationSort": false,
"ignoreMemberSort": false,
"memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
"allowSeparatedGroups": false // <-- Change this to true
}],
Which prevents you from reordering local imports and third party imports that are in different groups but violate the memberSyntaxSortOrder as earlier suggested
I'm having issues using npm packages with rollup (specifically lodash).
I'm getting an unresolved dependencies error. I have installed both rollup-plugin-node-resolve and rollup-plugin-commonjs and configured according to the docs. It's possible I could have missed something obvious.
Error
[~/Projects/rollup] yarn run build
yarn run v1.2.1
$ rollup -c
src/main.js → ./build/app.js...
(!) Unresolved dependencies
https://github.com/rollup/rollup/wiki/Troubleshooting#treating-module-as-external-dependency
loadash (imported by src/main.js)
(!) Missing global variable name
Use options.globals to specify browser global variable names corresponding to external modules
loadash (guessing 'loadash')
created ./build/app.js in 47ms
✨ Done in 0.93s.
src/main.js
import { map } from 'loadash';
console.log('Test');
rollup.config.js
import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
export default {
input: 'src/main.js',
output: {
file: './build/app.js',
format: 'iife'
},
plugins: [
resolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs()
]
};
What am I doing wrong?
It's called lodash, not loadash!