Tips for preventing VSCode TypeScript files from importing from unauthorized folders?

We work with typescript and webpack in a single repository to develop our game. To ensure shared states and objects, we have organized the code into three main folders.

This shared code is utilized on both the backend and frontend. It is crucial that server code is not imported by shared or client code to avoid any security vulnerabilities.

Previously, mistakenly importing server code led to a significant security breach, requiring us to change all keys. Unfortunately, there is no current system in place to prevent this from happening again.

One solution could be to separate the server and client into distinct projects, but this would be time-consuming and overly complex.

An alternative approach could involve running a script to detect instances where server code is being imported into shared or client files. This script could be created using Python and executed when pushing new code. However, tools like VSCode or npm may already offer similar functionalities.

Any assistance or advice on this matter would be greatly appreciated.

https://i.sstatic.net/QhJGv.png

typescriptnpmwebpackvisual-studio-code

Answer №1

By utilizing ESLint and incorporating the VS Code plugin, you can implement cascading configurations alongside restricted imports. While autocomplete may still suggest imports, they will promptly be highlighted in red with squiggly lines.

The directory structure remains unchanged but now includes configuration files:

code
├ client
│ └ .eslintrc
├ server
│ └ .eslintrc
└ .eslintrc

The critical point to note is that the root .eslintrc houses your primary rules, while subdirectory .eslintrc files can extend it as illustrated here. Further details on configuring this setup can be found in the documentation.

This approach enables you to establish restricted imports supporting both path-based and pattern-based restrictions:

"no-restricted-imports": ["error", {
    "paths": ["import1", "import2"],
    "patterns": ["import1/private/*", "import2/*", "!import2/good"]
}]

Subsequently, you can prevent server code imports within the client and shared directories.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide on incorporating jQuery into a jQuery plugin within an Angular 2+ application using Webpack or Angular CLI

I'm running into an issue importing a jQuery plugin into a single Angular component. It works fine in most browsers, but IE 11 is giving me this error: SCRIPT1002: Syntax error main.bundle.js (1376,1) When I investigate the error, it points me to th ...

javascriptjqueryangularwebpackangular-cli

Showing object data in TypeScript HTML when the object property starts with a numeral

Below is the function found in the TypeScript file that retrieves data from an API: .ts file getMachineConfigsByid(id) { this.machinesService.getMachineConfigById(id).subscribe((res) => { if (res.status === 'success') { ...

angulartypescript

Fire the BehaviorSubject with the identical value following a mutation

I am working with a BehaviorSubject where I have to make changes through mutation (for reasons beyond my control). I need to trigger the BehaviorSubject for subscriptions whenever there are changes. Is there another approach I can take instead of using: ...

angulartypescriptrxjs

What is the best way to transfer image files into a specific folder?

I am currently in the process of developing a ReactJS web application. My goal is to upload images to a specific folder and then store the file name in the database for future use. Everything seems to be working smoothly up to this point, but I am facing ...

reactjstypescriptasp.net-core

When using Material-UI with TypeScript, an error is thrown stating that global is not defined

After running the following commands: npm install --save react react-dom @material-ui/core npm install --save-dev webpack webpack-cli typescript ts-loader @types/react @types/react-dom I transpiled main.tsx: import * as React from "react"; import * as R ...

reactjstypescriptglobalmaterial-uireferenceerror

Encountering difficulties importing in Typescript and ts-node node scripts, regardless of configuration or package type

I am facing a challenge with my React Typescript project where multiple files share a similar structure but have differences at certain points. To avoid manually copying and pasting files and making changes, I decided to create a Node script that automates ...

javascriptnode.jstypescriptnpm-scriptsts-node

Definition type not found

I am currently getting familiar with VS Code and expressJs. I have made the decision to split my routes into separate files using the Route.use function. In the new file, I want to see intellisense suggestions for all the methods in the app parameters, s ...

expresstypesvisual-studio-codeintellisensejsdoc

challenges with template inheritance: when one template takes precedence over another

I have encountered an issue with my two HTML templates, login.html and signup.html. Both of these files inherit from the base.html file, but there seems to be a problem where one file is overriding the title and content of the other. So when I visit /login ...

javascripttypescripttemplatesgo-templates

When TypeScript error "ts(18004)" occurs, it is because of the object properties within all Prisma DB

I am currently in the process of verifying if a user's email already exists. To achieve this, I am utilizing Prisma Client's findUnique method. Below is the code snippet I have implemented: const userWithEmail = await prisma.user.findUnique({ ...

typescriptnext.jsprisma

Installing DYLD_ environment globally using sudo npm on iOS Yosemite

Since updating my machine to Yosemite, I've been encountering a problem. Every time I try to run sudo npm install -g ..., I keep getting an error message that says: /usr/bin/dyld: DYLD_ environment variables being ignored because main executable (/us ...

iosnode.jsnpmosx-yosemitesudo

Are you ensuring compliance with licensing in your Webpack bundles?

Can webpack be used to verify license compliance? I'm looking for a way to ensure that the license headers from all modules built by webpack are included in the final output file. How can we confirm this is happening? Furthermore, I am also intereste ...

javascriptnode.jsnpmwebpackwebpack-2

What is the process for publishing an "unstable" or "development" package using npm?

We manage our workflow with two git branches, master and develop. The master branch is kept stable while the develop branch contains untested work. We want teams to be able to pull down the develop work using npm for testing purposes or if they need it an ...

npm

Challenges with variable scopes and passing variables in Ionic 2 (Typescript)

In my Ionic 2 TypeScript file, I am facing an issue with setting the value of a variable from another method. When I close the modal, I get undefined as the value. I'm encountering difficulty in setting the value for coord. export class RegisterMapP ...

javascriptangulartypescriptionic2

Problem encountered with NPM while attempting to install ProcessMaker 4 for developers (EBADENGINE)

While setting up the NPM during the development installation, an error log pops up after running the npm install command in the Windows command prompt. npm ERR! code EBADENGINE npm ERR! engine Unsupported engine npm ERR! engine Not compatible with your ver ...

node.jsnpminstallationpackage.jsonprocessmaker

Steer clear of duplicating template literal type entries when dealing with optional routes

My code includes a type called ExtractParams that extracts parameters from a URL string: type ExtractParams<Path extends string> = Path extends `${infer Start}(${infer Rest})` ? ExtractParams<Start> & Partial<ExtractParams<Rest>& ...

typescript

Angular 13's APP_INITIALIZER doesn't wait as expected

Recently, I have been in the process of upgrading from okta/okta-angular version 3.x to 5.x and encountered an unexpected bug. Upon startup of the application, we utilized APP_INITIALIZER to trigger appInitializerFactory(configService: ConfigService), whi ...

javascriptangulartypescriptdependency-injectionokta

Dealing with nullable properties in Typescript

In my React Component code snippet, I am facing an issue with an optional field that needs to be initialized as undefined. This is causing difficulties when trying to use it after type checking. The problem arises in the context of using typescript version ...

reactjstypescript

The Datatable is displaying the message "The table is currently empty" despite the fact that the rows have been loaded through Angular

My experience with displaying a data table in Angular was frustrating. Even though all the records were present in the table, it kept showing "no data available." Additionally, the search function refused to work as intended. Whenever I tried searching for ...

angulartypescriptfirebasegoogle-cloud-firestore

What steps should I follow to set up a TypeScript project that incorporates JavaScript modules compiled from PureScript?

TL;DR I am looking to develop TypeScript typings for compiled PureScript modules and include them in my npm package. I am willing to manually maintain these typings, but I am struggling with the configuration needed in tsconfig.json (up and downstream) and ...

node.jstypescriptnpmpurescript

Struggling to retrieve dataset from Bootstrap 5 form while using Angular

With the combination of Angular and Bootstrap 5, I have crafted this unique HTML form: <div class="mb-3"> <label for="genreName"> Type name</label> <div *ngIf="!enterTheGenre" class="form-group&qu ...

htmlangulartypescriptbootstrap-5angular-ui-bootstrap