I've followed these steps: https://www.jetbrains.com/help/webstorm/tailwind-css.html.
I'm using Laravel Sail and Vite. And PhpStorm 2022.3.2 (Build #PS-223.8617.59, built on January 30, 2023)
My "Node interpreter" is set to docker://sail-8.2/app:latest/node.
Package manager is set to npm.
I can use custom Tailwind classes, which Vite will happily build instantly with sail npm run dev running in the background.
I just cannot get autocomplete in PhpStorm. Only for classes that I've actually used somewhere else in the page/project.
Any ideas?
Related
I created a website using HTML, JS and tailwind CSS. The tailwind CSS was installed using the CLI tool following the procedures in the documentation and is working fine when the page is executed with live server in Visual Studio Code.
npm install -D tailwindcss
and then created a tailwindcss.config.js with
npx tailwindcss init
Now the problem is, how do I share this whole website to a friend so that he can simply run the index.html file and he sees a completely working website running the tailwindcss code too without him having to install and configure tailwindcss. Or if there is a way to export the project with all installed packages.
Because so far, it just runs the plain html code whenever I try to share the whole project or even if I simply try to execute the page outside VsCode.
what I see from VsCode live server
what I see when running the page outside VsCode
Perhaps a possible solution to share is to host a live project on an online editor, this example uses Vite to build an environment for Tailwind and Vanilla JavaScript, it does not have much configurations but can be forked to try.
If other tools are preferred, consider start a new project in such online editor from a template with Tailwind, or start a new Node.js project and use the terminal to install needed packages.
I use PhpStorm 2021.3 on MacOS (Apple Sillicon M1). I'm not sure the problem is with PhpStorm but PHP Code Sniffer doesn't work.
When I type this command it doesn't show any errors in the code and I'm sure I got some.
vendor/bin/phpcs
The only thing that appears in the console is Time: 38ms; Memory: 8MB
CodeSniffer is installed by composer.
On the other hand, if I enter this same command in Docker (with Laravel Sail, in bash), I do get a list of errors/warnings in my code.
Going back to PhpStorm, I tried to configure the IDE to work with PHPCS in Docker, but it still doesn't work, and I don't know where to look.
PHP_CodeSniffer version 3.6.2 (stable) by Squiz
How to make CodeSniffer work, either through PhpStorm or automate it in PhpStorm and Docker?
I admit I'm surely not expert on administrative things, but I have an ASP.NET Core 2 Web API that I correctly setup in Azure for continuous integration (it's almost automatic!) and it works perfectly.
Now I would like to do the same for a polymer client application, that I could already create as a project in VSTS (connection from Visual Studio Code working perfectly).
When I go to setup the continuous deployment, I'm stuck. I understand I have to do it manually, and I see a lot of templates, in VSTS, but I also understand that I would have to run a 'polymer build' command, and I don't know to setup the Polymer CLI in this environment...
Can anyone help at least a little bit?
You can install Polymer CLI through NPM task: Command: custom; Command and arguments: install -g polymer-cli.
Can anyone point me to a tutorial that uses Polymer 2 and polymer-build from Polymer CLI? When I use any example in the polymer-starter-kit and use polymer serve, it works fine; but when I use polymer build and serve the bundled or unbundled directory, I get 404 errors. I have even updated to the newest alpha version of polymer-cli.
Also, using https://github.com/tony19/generator-polymer-init-2-x-app generators have the same problem.
I also spent quit a bit of time to figure this one out. Please use the polymer-cli#next instead of polymer-cli
Plain polymer-cli doesn't seem to have the latest build and optimizations to support Polymer 2.0#Preview related functionality.
You can install polymer-cli#next. In Ubuntu, you can simply use npm install -g polymer-cli#next
Then on, the bundled and unbundled versions of the application generated through polymer build would just works fine.
Edit:
You can find my sample Polymer2.0#Preview version of the code at https://github.com/phani1kumar/phani1kumar.github.io branch is "devmaster".
the sw-precache-config.js is initial render-blocking. This will load all the resources that the main page needs to make the app available for offline use. src/lazy-resources.html loads resources for the next routes.
You would need to get a proper configuration based on your layout and main page in the following 3 files:
sw-precache-config.js, polymer.json, src/lazy-resources.html. This is a practice followed in the shop app from Polymer team, you may opt to a different mechanism for lazy loading. The bottom-line for lazy loading is to load the resources after Polymer.RenderStatus.afterNextRender.
You may also find the following article interesting: https://medium.com/#marcushellberg/how-i-sped-up-the-initial-render-of-my-polymer-app-by-86-eeff648a3dc0#.pi2iucwzi
I noticed a bug in the generator in that the starter-kit subgenerator was missing a dependency on webcomponentsjs, which would cause an error with polymer-build. And as you discovered, polymer.json was also missing dependencies for the polyfill support of webcomponentsjs, which caused 404s on polyfilled browsers (such as Linux Chrome). That's all fixed now in v0.0.6.
You'll also need a version of polymer-build that does not try to uglify the JavaScript, which would fail due to its inability to recognize ES6. The new-build-flags branch of the polymer-cli repo replaces uglify with babili for ES6 minification (added in PR#525). You could check out that branch and build it yourself, or you could install it from here:
npm i -g tony19-contrib/polymer-cli#dist-new-build-flags
For convenience, this branch is added as a devDependency when generating the 2.0 starter kit with generator-polymer-init-2-x-app.
To build and serve a Polymer 2.0 Starter Kit project:
Generate a 2.0 Starter Kit (using generator-polymer-init-2-x-app, v0.0.6 or newer) by selecting 2-x-app - starter application template:
$ polymer init
? Which starter template would you like to use?
...
2-x-app - (2.0 preview) blank application template
2-x-app - (2.0 preview) blank element template
❯ 2-x-app - (2.0 preview) starter application template
After the project generator finishes, build the project with yarn build:
$ yarn build
info: Deleting build/ directory...
info: Generating build/ directory...
info: Build complete!
Note that the output is only build/, and no longer build/bundled/ and build/unbundled/.
Serve up the contents of the build directory, and automatically open a browser to it:
$ polymer serve build -o
You could also serve it with a different tool to verify that the build output would work outside of the context of any Polymer tools. Start a Python server in build/, and manually open a browser to it:
$ cd build
$ python -m SimpleHTTPServer
After downloading all all the components of Polymer, I can not install it via the command line. Can someone write all of the step by step procedures?. I have already visited the site to see how but this does not work.
I am using Windows 10 and the command line for installation.
You might want to start off with Polymer Starter Kit, which includes instructions for setup and build.
https://github.com/PolymerElements/polymer-starter-kit