vscode-react-javascript-snippets VS eslint-plugin-import

Github: Js snippets Marketplace: Snippets marketplace

I think the VScode extension ES7+ React/Redux/React-Native snippets by dsznajder does quite a lot of heavy lifting and makes life eazier. See the list of snippets https://github.com/chillios-ts/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md

6. ES7 React/Redux/React-Native/JS snippets

ES7 React/Redux/GraphQL/React-Native snippets ✂️ This extension gives use a great number of code snippets to create components or imports faster. The first I do after create a new React component file is to use this extension, which autocomplete the initial part of a new component by just typing rafc + enter 🤯 👉 Here the list of snippets

Again, vFunction can provide a critical service by identifying and untangling these circular dependencies. With its ability to map and analyze dataflows, vFunction provides a visual representation of how services communicate across your architecture. Other tools, for specific languages, such as JavaScript, use tools like ES Lint or Madge to detect circular dependencies. For Python, Pyreverse excels at visually representing circular dependencies of modules: by highlighting circular communication routes, excessive communication, and tightly coupled components. From there, these insights allow teams to take corrective action.

If you want to use ESLint to force explicit import paths, you can configure import/extensions or import-x/extensions rule, as shown below.

// babel.config.js import importPlugin from 'eslint-plugin-import'; export default [ { plugins: { import: importPlugin, }, rules: { 'import/no-cycle': ['error', { maxDepth: Infinity }], }, languageOptions: { "parserOptions": { "ecmaVersion": 6, // or use 6 for ES6 "sourceType": "module" }, }, settings: { // Need this to let 'import/no-cycle' to work // reference: https://github.com/import-js/eslint-plugin-import/issues/2556#issuecomment-1419518561 "import/parsers": { espree: [".js", ".cjs", ".mjs", ".jsx"], } }, }, ];

[2]: https://github.com/import-js/eslint-plugin-import/pull/2447#...

Finally, I'd also suggest requiring named exports via import:

eslint-plugin-import

You can 1. use a rule like this one to ensure that no one imports from antd and 2. limit what they can import from your library via https://nodejs.org/api/packages.html#main-entry-point-export

I'd check the eslint docs. They usually have a little write up about the rule.

Next, you add the ESLint rule or TypeScript configuration so it never happens again.

Are you using Eslint? It is possible to remove all the unused import on file level, but I don't remember if the setting is in the recommend config or the import/ordef plugin. If configured correctly, VS Code will prompt you with an option (CTRL+.) to "Delete all unused imports". It's only on file level though.