Fórum Root.cz

Hlavní témata => Vývoj => Téma založeno: registrovany123 28. 05. 2021, 14:10:21

Název: IntelliJ Idea a web development
Přispěvatel: registrovany123 28. 05. 2021, 14:10:21
Zdravim,

mam takovy dotaz. Mam tento HTML file (viz nize) a nejsem spokojen jak mi s nim IntelliJ pracuje.

1. Nefunguje mi naseptavani pro
Kód: [Vybrat]
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>

coz bych jeste pochopil, ale

2. Nefunguje mi nasptavani ani pro muj lokalni soubor:
Kód: [Vybrat]
    <script src="vue-google-maps.js"></script>

3. To bych jeste zaskripal zubama, ale ono mi to ani nenajde usage od teto funkce:
Kód: [Vybrat]
            onMarkerClick: function (input) {
                this.markers.splice(this.markers.indexOf(input), 1)
            }

4. Nejen ze to nenajde usage, ale nefunugje mi ani refactoring, zmena se nepropise do HTML templatu.

5. Zlute mi to zvyraznuje cely tento radek, kdyz na to kliknu da to nabidku "Add google-map-marker to custom tags" coz je vysoce otravne, a ani nevidim ze bych z too mel nejaky uzitek.

Kód: [Vybrat]
    <google-map-marker v-for="marker in markers" :position="marker.position" @g-click="onMarkerClick(marker)"/>

========

Podtrzeno a secteno, prijde mi, ze to ma IntelliJ tak rozbite, ze by mi lepe fungoval obycejny text editor jako je VIsual Studio Code, kde refactoring je obycejny find and replace. Ale ja jsem zvykly na Ideu.

Nevite jestli se to neda nejak v IntelliJ opravit?



Kód: [Vybrat]
    <google-map-marker v-for="marker in markers" :position="marker.position" @g-click="onMarkerClick(marker)"/>

Citace
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>
    <script src="vue-google-maps.js"></script>
</head>
<body>

<google-map style="width: 80%; height: 100%; position: absolute; left:0; top:0"
            :center="center"
            :zoom="zoom"
            @g-rightclick="onMapRightClick"
>
    <google-map-marker v-for="marker in markers" :position="marker.position" @g-click="onMarkerClick(marker)"/>
</google-map>

<script>
    VueGoogleMap.load({
        'key': 'AIzaSyCca3BtctZGXkMlZSk8hNXXw_j_EMYLDBI',
    })
    Vue.component('google-map', VueGoogleMap.Map);
    Vue.component('google-map-marker', VueGoogleMap.Marker);
    new Vue({
        el: 'body',
        data: {
            center: {
                lat: 1.38,
                lng: 103.8
            },
            zoom: 12,
            markers: [
                {position: {lat: 1.38, lng: 103.8}},
                {position: {lat: 1.37, lng: 103.8}},
                {position: {lat: 1.36, lng: 103.8}},
            ]
        },
        methods: {
            createMarker: function (lat, lng) {
                return {position: {lat, lng}}
            },
            onMapRightClick: function (input) {
                let newMarker = this.createMarker(input.latLng.lat(), input.latLng.lng());
                this.markers.push(newMarker);
            },
            onMarkerClick: function (input) {
                this.markers.splice(this.markers.indexOf(input), 1)
            }
        }
    });

</script>

</body>

Název: Re:IntelliJ Idea a web development
Přispěvatel: registrovany123 28. 05. 2021, 14:18:11
A tady je ten js filekdybyste si to chteli zkusit na localhostu:

https://github.com/GuillaumeLeclerc/vue-google-maps/blob/master/dist/vue-google-maps.js
Název: Re:IntelliJ Idea a web development
Přispěvatel: Pixe 28. 05. 2021, 15:06:32
To je tím, že místo toho abys použil normální nástroje (to zlé npm-ko, viz druhý topic), tak jdeš vlastní cestou... Jako češi při covidu  :D

Ale teď vážně, máš v té Idea nainstalované pluginy pro Vue.js a Javascript?
Název: Re:IntelliJ Idea a web development
Přispěvatel: registrovany123 28. 05. 2021, 15:13:53
To je tím, že místo toho abys použil normální nástroje (to zlé npm-ko, viz druhý topic), tak jdeš vlastní cestou... Jako češi při covidu  :D

Ale teď vážně, máš v té Idea nainstalované pluginy pro Vue.js a Javascript?

Ano mam, ale v tomto setupu je aktivni jen javascriptovy. Me naveadi ze tam neumi takto Vue. Me vadi ze ani reafaktoring jmen mi tam nefunugje.
Název: Re:IntelliJ Idea a web development
Přispěvatel: Mlocik97 28. 05. 2021, 15:42:59
To je tím, že místo toho abys použil normální nástroje (to zlé npm-ko, viz druhý topic), tak jdeš vlastní cestou... Jako češi při covidu  :D

Ale teď vážně, máš v té Idea nainstalované pluginy pro Vue.js a Javascript?

Ano mam, ale v tomto setupu je aktivni jen javascriptovy. Me naveadi ze tam neumi takto Vue. Me vadi ze ani reafaktoring jmen mi tam nefunugje.

Stáhni VS Code, stáhni Node.js, a programuj jak chlap v roku 2021
Název: Re:IntelliJ Idea a web development
Přispěvatel: Pixe 28. 05. 2021, 16:38:25
Neodpustím si odcitovat svoji oblíbenou učitelku ze střední (a ještě mixnu to svojí zubařkou) - "sakra chlape" a "vy jste pro reálnej život naprosto nepoužitelní".

Existuje nějaký rozumný důvod, proč když chceš vyvíjet appku ve Vue.js, tak si ten plugin deaktivuješ?... Neexistuje.

Citace
Me naveadi ze tam neumi takto Vue
- když to IDE neví co to je za jazyk/framework, tak samozřejmě ani neví jak to má refaktorovat - stačí si nastavit asociace a říct tomu "tenhle kus kódu je vue/javascript/html/..."
Název: Re:IntelliJ Idea a web development
Přispěvatel: registrovany123 28. 05. 2021, 16:48:31
Neodpustím si odcitovat svoji oblíbenou učitelku ze střední (a ještě mixnu to svojí zubařkou) - "sakra chlape" a "vy jste pro reálnej život naprosto nepoužitelní".

Existuje nějaký rozumný důvod, proč když chceš vyvíjet appku ve Vue.js, tak si ten plugin deaktivuješ?... Neexistuje.

Citace
Me naveadi ze tam neumi takto Vue
- když to IDE neví co to je za jazyk/framework, tak samozřejmě ani neví jak to má refaktorovat - stačí si nastavit asociace a říct tomu "tenhle kus kódu je vue/javascript/html/..."

Ale prd, kazdy sprosty editor webu ma alespon tu funcki, ze to naseptava uz alespon jednou pouzite identifikatory v dokumentu. Tohle by mi bohate stacilo.
Název: Re:IntelliJ Idea a web development
Přispěvatel: L.. 28. 05. 2021, 16:58:35
Nojo, jenže Javascript není Java. Javascript má pouze runtime typy, tedy IDE může těžko tušit, jestli tu funkci onMarkerClick ve výsledku voláš z téhle třídy nebo z nějaké jiné. V určitých případech by se to dalo odhadnout z nějaké komplexnější analýzy kódu, ale to by asi bylo zase dost pomalé a pracné na naprogramování.

Proto se pro alespoň trochu serióznější projekty používá Typescript. (Samozřejmě pokud jádro projektu je knihovna co nemá TS bindings, tak si zas až tolik nepomůžeš.)
Název: Re:IntelliJ Idea a web development
Přispěvatel: Pixe 28. 05. 2021, 17:00:51
Ta sprostá idea ti jen dává najevo, že <google-map není validní HTML tag. Když neví, jestli se jedná o kód, nebo nějakou hatmatilku, tak logicky nemůže ani poznat, že má uvnitř toho hledat nějaké výskyty identifikátorů.

Název: Re:IntelliJ Idea a web development
Přispěvatel: A.P.Hacker 28. 05. 2021, 17:38:25
Nojo, jenže Javascript není Java. Javascript má pouze runtime typy, tedy IDE může těžko tušit, jestli tu funkci onMarkerClick ve výsledku voláš z téhle třídy nebo z nějaké jiné. V určitých případech by se to dalo odhadnout z nějaké komplexnější analýzy kódu, ale to by asi bylo zase dost pomalé a pracné na naprogramování.

Proto se pro alespoň trochu serióznější projekty používá Typescript. (Samozřejmě pokud jádro projektu je knihovna co nemá TS bindings, tak si zas až tolik nepomůžeš.)

IDE je uplne jedno jestli pisete (nepovine) typescriptove anotace nebo pisete typy v komentarich
Název: Re:IntelliJ Idea a web development
Přispěvatel: Pixe 28. 05. 2021, 18:00:19
A abys viděl, že to ta Idea v pohodě zvládá, tak k bodu č. 4 asi takto - https://pasteboard.co/K40knz5.png - prostě funguje jak má.
Název: Re:IntelliJ Idea a web development
Přispěvatel: registrovany123 28. 05. 2021, 19:23:02
A abys viděl, že to ta Idea v pohodě zvládá, tak k bodu č. 4 asi takto - https://pasteboard.co/K40knz5.png - prostě funguje jak má.

Naopak vidim ze to nezvlada, tam jsou celkem reference 2, jedna v JS a jedna v HTML, tobe to ukazuje taky jenom jednu
Název: Re:IntelliJ Idea a web development
Přispěvatel: Filip Jirsák 28. 05. 2021, 19:38:40
Mně teda IntelliJ Idea funguje pro webový vývoj daleko lépe, než Visual Studio Code. Vzhledem k tomu, že jste průkopníkem nestandardních řešení, viděl bych problém spíš na vaší straně. javaScript je dynamický jazyk, IDE nemá jinou  šanci, jak porozumět kódu, než se spoléhat na to, že vývojář používá běžné konvence. No a když vy je nepoužíváte, IDE logicky kódu nerozumí.
Název: Re:IntelliJ Idea a web development
Přispěvatel: Pixe 28. 05. 2021, 19:39:58
Problém je v tom, že ten týpek ani neumí počítat.

Když mám kurzor na řádku 44, kolik referencí na ten řádek vede? Jedna.
Název: Re:IntelliJ Idea a web development
Přispěvatel: none_ 28. 05. 2021, 20:10:29
Ja bych jeste pridal, ze u IntelliJ velmi zavisi na licenci. Poradna podpora Javascriptu je v placenych licencich. Community umi akorat Javu...
Název: Re:IntelliJ Idea a web development
Přispěvatel: registrovany123 28. 05. 2021, 21:06:00
Problém je v tom, že ten týpek ani neumí počítat.

Když mám kurzor na řádku 44, kolik referencí na ten řádek vede? Jedna.

Udelej refactor, a pak se podivej, ze se to nezmenilo v HTML @click udalosti.
Název: Re:IntelliJ Idea a web development
Přispěvatel: Pixe 28. 05. 2021, 21:13:28
Změnilo. Dokonce je to vidět v tom co jsem posílal, že plánuje refaktorovat třináctý řádek.
Název: Re:IntelliJ Idea a web development
Přispěvatel: registrovany123 28. 05. 2021, 21:31:59
Vzhledem k tomu, že jste průkopníkem nestandardních řešení, viděl bych problém spíš na vaší straně.

Musim to znovu zopakovat, ze muj pristup je v ramci Vue zcela v poradku. Ten framework je na to delany. To ze to hapruje v IntelliJ je jen drobny detail, za prechod na NPM mi to nestoji.

Stejne neumi Idea ani poradne nasptavat ani tam, ma podporu pro Vue, to jo, ale tu nepotrebuji. A ke knihovnam, kde by se mi to naopak hodilo, mi to nenaseptava. Musim se divat do zdrojaku v src tak jako tak.
Název: Re:IntelliJ Idea a web development
Přispěvatel: Pixe 28. 05. 2021, 21:34:50
Když neumí to co chceš, proč ji používáš? ;D

(a pokud odpovíš že ji máš rád... proč nadáváš? ;) )
Název: Re:IntelliJ Idea a web development
Přispěvatel: Filip Jirsák 28. 05. 2021, 23:12:18
Musim to znovu zopakovat, ze muj pristup je v ramci Vue zcela v poradku.
Ano, použití Vue z CDN je naprosto v pořádku. V pořádku není používat Vue 1, když je aktuální Vue 3. V pořádku není používat pět let nevyvíjenou knihovnu. A vypnout si Vue plugin a pak se divit, že vám to nenapovídá ve Vue kódu, to je taky dost zvláštní.

A ke knihovnam, kde by se mi to naopak hodilo, mi to nenaseptava.
A máte to správně nakonfigurované?
Název: Re:IntelliJ Idea a web development
Přispěvatel: none_ 29. 05. 2021, 06:33:47
A ja bych se znova zeptal na tu licenci. Pokud nemate Intellij Ultimate nebo WebStorm, tak vam to napovidat nebude...
https://www.jetbrains.com/idea/features/editions_comparison_matrix.html

Bez licence je rozhodne lepsi pouzit VS Code nebo neco takoveho. S licenci toho IntelliJ umi vic a chyba bude nekde na vasem prijimaci.
Název: Re:IntelliJ Idea a web development
Přispěvatel: L.. 29. 05. 2021, 07:47:31
IDE je uplne jedno jestli pisete (nepovine) typescriptove anotace nebo pisete typy v komentarich

To sice ano, ale on tam nemá ani ty.

Typy v komentářích jsou sice také do určité míry funkční, ale jejich funkčnost je omezená (AFAIK nemají třeba typovou aritmetiku) a proto jsem ještě nepotkal reálný projekt, kde by se používaly. Používá se prostě Typescript, když něco, tak Flow, ale to mi přijde poslední dobou na ústupu. Proč vynalézat pořád dokola kolo.