Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »

M31: Jun 12, 2012

Ape Fist posted:

Cypress is kind of as good as it gets, bud.

Unfortunate, but not unexpected..

# ? Jun 30, 2021 03:57

Adbot: ADBOT LOVES YOU

# ? Jun 7, 2024 14:21

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

fireraiser posted:

If you're initializing multiple instances (not just once in in init.js), then what you have there makes sense to me. There's no problem with exporting an instance if it's what you need.

If you're only initializing it once, you probably don't need a closure, nor your init.js, and can just leave interceptor as a local variable in module scope and export setNewToken directly.

Since you mentioned intercepting HTTP requests, are you using any http framework, like express/koa/hapi/fastify/etc? Those have their own established patterns for adding middleware to an HTTP server.

yep I'm using axios interceptors, but I essentially just want to clear one interceptor when the user logs out and re-add the interceptor with the new JWT when the user logs in again. This is essentially so that I don't end up in a scenario where I might have a bunch of axios interceptors declared if the user logs in/out multiple times.

Most common scenario is that it's only going to get called once, but I'd rather play it safe.

# ? Jun 30, 2021 04:29

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

fireraiser posted:

I think lerna or yarn-workspaces is over-kill if all you want to do is include an example app.

Put your SDK in the root directory. Nest your example project in a example/ subdirectory.

Inside the example directory, include a package.json with a file dependency pointing at the parent directory:
code:
"dependencies": {
  "your-sdk-package-name": "file:.."
}

update on this.

The solution I went with is using typescript paths in my tsconfig.json to reference the local distribution files as the dependency so that I still get hot module reloading.

The issue with file:.. is that the link only happens once at installation time and never again.

My tsconfig.json ended up looking like this:

JSON code:

{
  "compilerOptions": {
    "noImplicitAny": true,
    "moduleResolution": "node",
    "module": "es6",
    "target": "es5",
    "noEmit": true,
    "jsx": "react",
    "allowJs": true,
    "baseUrl": ".",
    "downlevelIteration": true,
    "esModuleInterop": true,
    "paths": {
      "src/*": ["src/*"],
      "my-package": ["../dist"] // important part here. lets me "import { thing } from 'my-package'" which is a directory up from this sample app
    }
  },
  "include": [
    "./src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/__tests__/*",
    "**/*.test.ts",
    "**/*.spec.ts"
  ]
}

# ? Jun 30, 2021 04:32

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

omg I have a million questions this week for some reason.

Any TypeScript people know what's going wrong here?

TypeScript code:

interface DoThing {
  (arg: true): { hi: string };
  (arg: false): { hello: number };
}

export const doThing: DoThing = arg => { // error here  ----> "Types of property 'hi' are incompatible. Type 'undefined' is not assignable to type 'string'."
  if (arg) {
    return {
      hi: 'hello'
    };
  }

  return {
    hello: 3
  };
};

From what I can tell this overload should be working. If it's true, return one interface, false return another

# ? Jun 30, 2021 23:18

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

I think it's the way the TS infers the function's type.

It's trying to conform

code:

interface DoThing { 
	(arg: boolean): { hi: string } | { hello: number }; 
}

to your interface and failing.

e: it looks to me like you're trying to do pattern matching via interfaces, and pattern matching is not a thing in TS (yet?)

gbut fucked around with this message at 00:19 on Jul 1, 2021

# ? Jul 1, 2021 00:16

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

gbut posted:

I think it's the way the TS infers the function's type.

It's trying to conform
code:
interface DoThing { 
	(arg: boolean): { hi: string } | { hello: number }; 
}
to your interface and failing.

e: it looks to me like you're trying to do pattern matching via interfaces, and pattern matching is not a thing in TS (yet?)

yep hovering over the function without typing it, it's definitely showing a union between the two return types.

I ended up just using method overloads and everything is working just as I wanted but I'm kind of annoyed because I thought interface overloads were essentially another way of doing the same exact thing, except one solution works and one doesn't

JavaScript code:

eport function doThing(arg: true): { hi: string }
export function doThing(arg: false): { hello: number }
export function doThing(arg: boolean) {
  if (arg) {
    return {
      hi: 'hello'
    };
  }

  return {
    hello: 3
  };
}

So now I'm just annoyed haha

e: I ended up submitting a GitHub issue and it was closed as a design limitation, so apparently it's a genuine issue

teen phone cutie fucked around with this message at 18:53 on Jul 1, 2021

# ? Jul 1, 2021 12:51

Doom Mathematic: Sep 2, 2008

Grump posted:

Would you guys consider it bad practice to import/export closure functions?

Something like this where I want to set up an interceptor for HTTP requests to use an access token on the header of every request:
JavaScript code:
export const init = (): { setNewToken: (newToken: string) => void } => {
  let interceptor: (() => void) | null = null;
  return {
    setNewToken: token => {
      if (interceptor) {
        /* clear previously cached interceptor function */
      }
      interceptor = () => {
        /* intercept all HTTP requests here with new token */
      };
    }
  };
};
Where you'd have an init.js:
JavaScript code:
export { setNewToken } = init();
Where you'd have login.js and refreshToken.js both do
JavaScript code:
import { setNewToken } from './init.js'

export const login = () => setNewToken('123')
JavaScript code:
import { setNewToken } from './init.js'

export const refreshToken = () => setNewToken('345')
Or I guess in another case, is it okay to import/export instances of a class?

The main thing that bugs me about importing/exporting instances of a class or closure is that it means that some kind of significant code is being executed at module load time in order to construct that instance. Things which happen at module load time generally all happen in a big rush at application start, in an order which can be difficult to unscramble or predict - I've seen cases where that ordering was significant, which resulted in us needing to be careful about exactly which order modules loaded in, which was irritating and troublesome. (Circular module dependencies made this worse, admittedly.) This also means that the simple act of importing something from a module can have unexpected consequences, when generally you don't expect a simple import statement to actually do anything. It implies the existence of some kind of mutable global state, shared across both login.js and refreshToken.js - the act of importing either of those modules has the side-effect of initializing that state. All of this in turn can be a hassle to unit test, because you have to figure out how to separate/undo the side-effects which are caused by one test and visible in the next one. Ultimately there has to be some module which actually does work at module load time, otherwise your application doesn't actually do anything, but this is something I try to keep limited to a single script which generally loads constructors and suchlike from other modules and then does some construction.

This is just personal opinion though. I could be persuaded otherwise.

# ? Jul 1, 2021 23:21

astral: Apr 26, 2004

Just a friendly heads-up that JSON, TypeScript, and HTML are among the languages now officially supported in the recently-updated [code=thing] tags. Enjoy! I tweaked the language of a couple of code blocks on this page to help show it off.

Full list of supported languages/language aliases available here.

# ? Jul 2, 2021 07:13

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

astral posted:

Just a friendly heads-up that JSON, TypeScript, and HTML are among the languages now officially supported in the recently-updated [code=thing] tags. Enjoy! I tweaked the language of a couple of code blocks on this page to help show it off.

Full list of supported languages/language aliases available here.

# ? Jul 2, 2021 19:22

prom candy: Dec 16, 2005; Only I may dance

astral posted:

Just a friendly heads-up that JSON, TypeScript, and HTML are among the languages now officially supported in the recently-updated [code=thing] tags. Enjoy! I tweaked the language of a couple of code blocks on this page to help show it off.

Full list of supported languages/language aliases available here.

dope, thank you!

# ? Jul 2, 2021 22:16

UtahIsNotAState: Jun 27, 2006; Dick will make you slap somebody!

What the gently caress is going on with setting up eslint in vs code.

When I was just a contractor at my company, they only allowed me to use notepad++ and no npm. During my other contracting work, I used webstorm and setting up eslint was so easy because it did everything for you.

Shortly after I got hired full time with the company, some hero somewhere in IT said "gently caress it give them node/npm and VS code +let them install extensions for VS code". That gave me access to develop stuff like it was 2021(good luck finding knockout tutorials in 2021 btw). Anyway, I realized the other day that eslint wasn't working as well as it did in webstorm and looked up some guides on how to set it up with VS code

What the absolute gently caress is going on. You have to install like 20 loving npm packages just for making eslint useful. You are hosed even more if you find an old setup guide because now a lot of stuff won't play nice with each other. There is supposed to be this eslint extension in VS code to make life easy but its nowhere near as powerful as what comes default with webstorm. I have no idea what it does when you still have to install all those packages as devedependicies when you start a new project.

To top it all off, I've always used the airbnb eslint config but apparently the non-webstorm version breaks builds on any issues. Stuff like unused imports, line spacing, and other small bullshit it'll tell you to gently caress off and fix those if you want to build your project. The autofix doesn't even fix everything and you have to do it manually. Also prettier and eslint apparently hate each other in vscode?

# ? Jul 11, 2021 02:54

prom candy: Dec 16, 2005; Only I may dance

It's always just worked for me?

# ? Jul 11, 2021 03:35

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

yeah i mean just look up an eslint +
prettier + vscode blog post and you should be set

unless you're working in a monorepo, it really shouldn't be too hard

# ? Jul 11, 2021 04:15

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Prettier and eslint both can impose formatting rules so yeah they�re gonna fight unless you use the eslint config for prettier

If you�re trying to set up eslint go to the eslint website and follow the getting started guide.

If you�re trying to get set up with an existing project talk to the team that develops on it and work with them to get their documentation fixed

Eslint is fine and tons of people use it so the problem is almost certainly somewhere on your end

# ? Jul 11, 2021 04:52

UtahIsNotAState: Jun 27, 2006; Dick will make you slap somebody!

prom candy posted:

It's always just worked for me?

Grump posted:

yeah i mean just look up an eslint +
prettier + vscode blog post and you should be set

unless you're working in a monorepo, it really shouldn't be too hard

]

I can use setup the basic one that there are a billion tutorials on, but that just results in something that can check for syntax errors and maybe a few blatant rules here and there. Compared to something that incorporates things like airbnb/google/fb style guides it's like going from driving a Ferrari to riding a bike. It'll point out sorts of stuff and shame you when you write poor code.

Chenghiz posted:

Prettier and eslint both can impose formatting rules so yeah they�re gonna fight unless you use the eslint config for prettier

If you�re trying to set up eslint go to the eslint website and follow the getting started guide.

If you�re trying to get set up with an existing project talk to the team that develops on it and work with them to get their documentation fixed

Eslint is fine and tons of people use it so the problem is almost certainly somewhere on your end

The whole eslint and prettier fight was the 2nd stupidest thing I had to deal with. Webstorm just does everything for you so I had no idea that they could even have compatibility issues. The whole break on build if there is even slightly an issue is what pissed me off. Declared something but didn't use it because you wanted to try something else for a second? gently caress off we're not letting you build. Have too long of a line? gently caress off you're not building either. I think webstorm overrides it to warn only which I thought everyone had.

# ? Jul 11, 2021 06:12

fsif: Jul 18, 2003

Yeah I don�t know what to tell you man. You installed a standard eslint config but didn�t like how passive it was in code checking, so you installed an extraordinarily opinionated config and now you don�t like how persnickety it is. Maybe create your own Goldilocks config?

# ? Jul 11, 2021 12:52

UtahIsNotAState: Jun 27, 2006; Dick will make you slap somebody!

fsif posted:

Yeah I don�t know what to tell you man. You installed a standard eslint config but didn�t like how passive it was in code checking, so you installed an extraordinarily opinionated config and now you don�t like how persnickety it is. Maybe create your own Goldilocks config?

My only complaint was that webstorm did all that for you out of the box and vs code required me setting everything up myself.

# ? Jul 11, 2021 17:03

ModeSix: Mar 14, 2009

UtahIsNotAState posted:

My only complaint was that webstorm did all that for you out of the box and vs code required me setting everything up myself.

I mean, $649/year vs Free.

# ? Jul 11, 2021 18:00

fsif: Jul 18, 2003

Ah, missed that bit at the end where you theorized that WebStorm overrides errors in the build by default. I've never used WebStorm, but are you sure that you or someone on your team didn't edit your last project's .eslintrc or build config to do that? That's not the type of behavior typically governed by an IDE and it'd be incredibly strange (and likely problematic) for it to do so, especially by default.

# ? Jul 11, 2021 18:05

UtahIsNotAState: Jun 27, 2006; Dick will make you slap somebody!

ModeSix posted:

I mean, $649/year vs Free.

That's the price for organizations, but the individual license isn't any better. The price for individuals is apparently now $25/month WITHOUT the yearly discounts????? I guess I got lucky because they kept giving me discounts every year so now it's only $15/month. When I was doing freelance stuff, I had to work across many different stacks (Wordpress, Django, and React) so it made sense for me. I still work on side projects using Django and React (i'd rather die then do anything related to wordpress) and I think it's worth keeping for the price of a WoW subscription.

fsif posted:

Ah, missed that bit at the end where you theorized that WebStorm overrides errors in the build by default. I've never used WebStorm, but are you sure that you or someone on your team didn't edit your last project's .eslintrc or build config to do that? That's not the type of behavior typically governed by an IDE and it'd be incredibly strange (and likely problematic) for it to do so, especially by default.

I don't even have a .eslintrc file in my project. I checked the settings and it just asks you to point to the global install and it'll setup everything from there.

But now that you mention it, I do remember that there was some weird rear end bug where it would force some syntax change that broke everything. I don't remember much, but when it auto formatted on file save, it would cause errors and wouldn't work. I think I had to manually disable that, but I have no idea where I made that change? It still enforces whatever I did across all my projects though.

EDIT: The settings menu has a "setup automatically" or "setup manually" option. I just have automatically selected.

UtahIsNotAState fucked around with this message at 20:45 on Jul 11, 2021

# ? Jul 11, 2021 20:40

Macichne Leainig: Jul 26, 2012; by VG

UtahIsNotAState posted:

That's the price for organizations, but the individual license isn't any better. The price for individuals is apparently now $25/month WITHOUT the yearly discounts????? I guess I got lucky because they kept giving me discounts every year so now it's only $15/month. When I was doing freelance stuff, I had to work across many different stacks (Wordpress, Django, and React) so it made sense for me. I still work on side projects using Django and React (i'd rather die then do anything related to wordpress) and I think it's worth keeping for the price of a WoW subscription.

The continuity discount is now only available through the yearly subscription and tops out at 40% off/$149.00 yearly, which comes out at about $12.42 monthly.

I know this as a yearly subscriber to the all products pack, happily been saving 40% for about three years now.

# ? Jul 11, 2021 21:48

UtahIsNotAState: Jun 27, 2006; Dick will make you slap somebody!

Protocol7 posted:

The continuity discount is now only available through the yearly subscription and tops out at 40% off/$149.00 yearly, which comes out at about $12.42 monthly.

I know this as a yearly subscriber to the all products pack, happily been saving 40% for about three years now.

That's sad that they took it away for the monthly subscribers. It feels like a complete waste of money when you come in from using free IDEs because they are horrible at showing newbies what features it has. Whenever I try reading their documentation, I feel like they assume that you've been using their IDEs for years and understand what's going on. For people coming from free IDEs, it doesn't feel like it has any features that a free editor with plugins has.

I would have never even given it a chance if yearly subs were the only option for discounts when I signed up.

That said, they do loving spoil the poo poo out of you sometimes so it's hard to go back to free editors that don't have plugins for out of box features on webstorm. I really wish they'd do better onboarding completely new users though.

# ? Jul 11, 2021 22:27

prom candy: Dec 16, 2005; Only I may dance

UtahIsNotAState posted:

I can use setup the basic one that there are a billion tutorials on, but that just results in something that can check for syntax errors and maybe a few blatant rules here and there. Compared to something that incorporates things like airbnb/google/fb style guides it's like going from driving a Ferrari to riding a bike. It'll point out sorts of stuff and shame you when you write poor code.

I always set up my own custom eslint and prettier configs (the eslint config generally extends another one) and it still just works. Like, there's no difference for me between running prettier/eslint from the command line and having it running in vscode.

Are eslint and prettier working properly from the command line for you?

# ? Jul 12, 2021 02:43

UtahIsNotAState: Jun 27, 2006; Dick will make you slap somebody!

prom candy posted:

Are eslint and prettier working properly from the command line for you?

I've never had to use the command line for eslint in webstorm. I didn't even know that was a thing.

Anyway, I started hunting for the articles that I read. The first article I used was on my work computer but can't find it right now. I tried again a 2nd time on my development computer using a different article and i've included the link below.

https://haykerman.medium.com/setting-up-eslint-prettier-for-react-app-in-vscode-8662de2d9a96

I just tried this in VS Code and have documented my journey below:

1. I install the dependencies, create the eslint and prettier files, and do npm start:

That's weird, but ok whatever maybe the article is a bit out of date.

I do what the terminal says and try again:

ok gently caress it let's just take out prettier. VS code lets me just do that in the command bar or whatever its called anyway.

That was my bad, I didn't take out the prettier rule.

Here is my eslint file with the corrected changes:

Let's try this again

Now it's loving bitching about reportWebVitals???? I didn't even write that.

EDIT: To be clear, I purposely made logo to not be used to show you what I dealt with.

UtahIsNotAState fucked around with this message at 04:39 on Jul 12, 2021

# ? Jul 12, 2021 04:26

Ima Computer: Oct 28, 2007; Stop all the downloading!

Help computer.

Stop reading outdated medium articles and start reading the documentation.

The automatic eslint config option in webstorm has literally the same behavior as the vscode eslint extension out of the box: it looks for an eslint configuration (.eslintrc or eslintConfig in package.json) in your project directory and uses it. Nothing should be behaving any differently, assuming you have an eslint config in your project.

If you don't like airbnb's rules, either overwrite the rules you don't like or don't use their config.

Here's a pretty basic, low-opinion setup for eslint w/ prettier:

Install these dev dependencies in your project: eslint prettier eslint-plugin-prettier eslint-config-prettier

Add an .eslintrc.js in the root of your project with:

JavaScript code:

module.exports = {
  env: {
    // set flags here based on the environment your JS will run in:
    // hxxps://eslint.org/docs/user-guide/configuring/language-options#specifying-environments
  },
  extends: [
    // extend the default eslint recommended config
    'eslint:recommended',
    // extend prettier plugin recommended config
    'plugin:prettier/recommended',
  ],
  rules: {
    // set or overwrite rules here, or don't, it's your config and you can do what you want
  },
};

Optionally, add a prettierrc too, if you want to set any options there.

Install the vscode eslint extension.

Optionally, add this to your vscode settings to run eslint on save:

JSON code:

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

The only reason I'd bother with IntelliJ/WebStorm over VScode for web dev is for the customizable tab names and pretty diff viewer, neither of which are enticing enough to get me to pay the recurring license fee outside of work.

# ? Jul 12, 2021 07:29

UtahIsNotAState: Jun 27, 2006; Dick will make you slap somebody!

fireraiser posted:

eslint stuff

This is AWESOME. Thank you so much.

fireraiser posted:

Stop reading outdated medium articles and start reading the documentation.

Listen here. The guys name was "haykerman". That's like hackerman. You're telling me you wouldn't take front end advice from Mr. Robot????

# ? Jul 14, 2021 00:31

biceps crimes: Apr 12, 2008

Nvm

biceps crimes fucked around with this message at 03:57 on Jul 24, 2021

# ? Jul 24, 2021 03:48

Saoshyant: Oct 26, 2010

I assume this would be the right thread for this sort of question: does anyone have experience with headless browsers and can offer me some advice?

So, there's this old legacy app that has tons of business logic built into what it calls frames (basically, pages) and it processes data over table fields, sometimes executing a back and forward XHR requests until it finished processing every row on a table, as in the backend did a bunch of database queries and the frontend went back and forth passing information through those "frames". This all happens either automatically on page load or manually on button press depending on the situation.

Now there's a need to have this sort of process also being done via cron job instead of just via user interaction, but as this uses HTML tables and JavaScript, it can't be just done with calling the backend language to do its thing alone, nor through a basic CURL request.

I assume browsers in headless mode (Chromium, Chrome, Firefox) can do this sort of thing, as in, be configured to enter a page, wait for it to finish rendering the frontend and wait for it to finish any async processing via XHR. Is this correct? And if so, which of those browsers would be a better fit plus what sort of commands would I need to configure them on the cron? Or is there an alternative, better solution out there that could do the required? Never did this sort of automation with such strict requirements before, so I'm kind lost on what to even look up.

# ? Aug 10, 2021 19:45

Doom Mathematic: Sep 2, 2008

So, the short answer is that you are describing a piece of technology called Cypress which, yes, can be used to automate browser interactions in the way you're describing. Cypress is generally intended for testing the behaviour of web applications, not for actually operating them, but that would do it.

The longer answer is that this is a direction I think you should avoid taking. You're dodging the task of dealing with the legacy app by wrapping yet another inscrutable layer of legacy app around it. This makes the problem worse, rather than solving it.

So the real question is who, if anybody, owns this legacy app. If it has owners, what they should be doing is providing some kind of sensible API which you can make basic HTTP requests to, sidestepping the entire UI layer. When you say that this isn't a thing you can do through a basic cURL request, I don't buy that, and I would push back. There is nothing that a web browser can do in terms of making HTTP requests which cURL can't do. If the legacy app is unmaintained, well, first, bad luck on being the new maintainer, and second, that means you have carte blanche to inspect the source, and the requests which go back and forth, and figure out how it works, and automate that instead.

# ? Aug 10, 2021 20:22

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

I agree with Doom that you should avoid doing this if at all possible, but if you must, I'd use puppeteer rather than cypress.

# ? Aug 10, 2021 20:30

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

From the initial description, it sounds to me that the business logic is split between front end and back end. The stuff that happens on the browser side is probably dependant on DOM state and traversal and would be pretty hard to mimic in cURL, depending how much of the application state exists solely in the browser, of course.

Some cypress-like tool (haven't tried puppeteer), that can poll/wait until element changes state, would probably be the easiest route, without having to rewrite the whole app as an API from scratch. Also, writing your own helpers to deal with async stuff, so you can accurately know when the async stuff is done and the DOM is in the state you actually want it, would probably just make everything more complicated if you were to just use a bare headless browser.

gbut fucked around with this message at 20:49 on Aug 10, 2021

# ? Aug 10, 2021 20:45

minato: Jun 7, 2004; cutty cain't hang, say 7-up.; Taco Defender

Selenium is another option for scripting pages. It's been around forever so there's lots of StackOverflow solutions for it. It's got standard functions for waiting until a page has loaded, waiting until an element with some ID appears in the DOM, etc.

Be aware that all these scripting tools suffer from some flakiness. There's all kinds of race conditions, and browsers are a moving target, so you might end up lots of sleep()s and retries.

# ? Aug 10, 2021 20:59

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

Just to underline what others have mentioned: OP, you probably won't be able to make something you can trust, at least nowhere near as much as a clean (HTTP based) API solution. Avoid committing to that project if at all possible.

gbut fucked around with this message at 21:48 on Aug 10, 2021

# ? Aug 10, 2021 21:40

MrMoo: Sep 14, 2000

Probably would go with NW.js, skip the headless bit as that may not work. One could easily build a web service into that that scrapes the website when necessary.

# ? Aug 11, 2021 04:53

neurotech: Apr 22, 2004; Deep in my dreams and I still hear her callin'
If you're alone, I'll come home.

For those of you who use WebStorm:

Does anyone know why WebStorm is highlighting my project files with a yellow background?

# ? Aug 11, 2021 09:11

boofhead: Feb 18, 2021

I believe it's related to the VCS. Take a look at this:

https://www.jetbrains.com/help/webstorm/file-status-highlights.html#editor

# ? Aug 11, 2021 11:50

neurotech: Apr 22, 2004; Deep in my dreams and I still hear her callin'
If you're alone, I'll come home.

boofhead posted:

I believe it's related to the VCS. Take a look at this:

https://www.jetbrains.com/help/webstorm/file-status-highlights.html#editor

Thanks - all sorted now.

Another WebStorm question - does anyone use Prettier with it? I'm trying to get WebStorm to automatically run Prettier on files that I save with Ctrl+S. This works perfectly in VS Code, but I cannot get it to work at all in WebStorm.

Has anyone encountered this and solved it?

# ? Aug 11, 2021 12:40

Macichne Leainig: Jul 26, 2012; by VG

I think there is a setting somewhere to configure on-save tasks but JetBrains� settings pages are sometimes kinda hard to dig through. I�ll take a look this morning to see if I can�t find it, but I�m pretty sure I set something like that up before.

# ? Aug 11, 2021 14:00

neurotech: Apr 22, 2004; Deep in my dreams and I still hear her callin'
If you're alone, I'll come home.

Protocol7 posted:

I think there is a setting somewhere to configure on-save tasks but JetBrains� settings pages are sometimes kinda hard to dig through. I�ll take a look this morning to see if I can�t find it, but I�m pretty sure I set something like that up before.

I have it enabled already

# ? Aug 11, 2021 14:15

Adbot: ADBOT LOVES YOU

# ? Jun 7, 2024 14:21

Macichne Leainig: Jul 26, 2012; by VG

I'm trying to take a look at it but none of the JetBrains IDEs are opening on my PC this morning so I guess it's gonna be one of those days...

EDIT: Ok, got it working (took three reboots, but whatever). It works out of the box for me with a setting like this:

One thing that does look suspicious to me based on your old screenshot is that all the folders are highlighted.

In my experience, when the VCS/Git status of a file changes in WebStorm, it doesn't highlight the entire row, just changes the color of the filename in the project view. That also might be the theme plugin I'm using. But I would check that your project folder isn't marked excluded or something because that might also upset the Prettier on save setting.

See here how in a new dummy project I created as a quick test, only my node_modules folder is highlighted in that way:

Alternately, if you right click a file, do you have the "Reformat with Prettier" option in the context menu? Just as a quick sanity test that WebStorm does see Prettier and runs it successfully.

Macichne Leainig fucked around with this message at 15:30 on Aug 11, 2021

# ? Aug 11, 2021 15:15

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »