How can I add prettier to my glitch projects? - node.js

I am creating small services on glitch and wanted to fork a typescript project (here you have a starter, to implement an oAuth gate.
I added a .prettierrc file, and added the husky, lint-staged packages, and a precommit script to run prettier on staged files, but it does not seem to take effect.
Any hand on this? I assume it should be rather simple.

I'm not familiar with Glitch but it doesn't seem to commit when you edit the project so the lint-staged approach won't work.
I guess your best option is to run Prettier via the project's Console (click Logs and then Console to open it).

Related

How to share ESlint settings across multiple SublimeText projects

I have tons of little projects that come and go and I don’t want to always have to create a .eslintrc file in my root dir or do any other special configuration to get my default lint settings to work.
After a few hours of googling and getting nowhere — I finally found one way to share the eslint settings across multiple Sublime projects that seems to work - just put the .eslintrc file in the parent directory of my projects. SublimeLinter seems smart enough to find it there.
I'm publishing this as one possible way to maybe help someone else in my predicament. I feel like maybe I'm doing something wrong though and there could be a better way?
ESLint offers sharable configs, which make things a little easier but still involve work for each project that wants to use them.
You can create a .eslintrc file in your home directory, and ESLint will use that as a fallback for any projects that don't specify their own .eslintrc. This is perfect for quick, temporary projects that you create. You can read more in the configuration cascade docs.
If any of them advance to a point where you want to collaborate with other developers, only then do you need to configure a project-specific .eslintrc to make sure that all collaborators are using the same configuration.

eslint configured the same for 2 folders, but linting differently

Before I start, I just want to mention I'm studying and learning to use a proper workflow with git, vue, express, npm, cli and webpack. I'm very new to these concepts but have been enjoying learning and troubleshooting this as I go along. I've been watching a popular video tutorial (I'll link if it is ok) on using VueJS with Express. In the past I've been just a standard html/php, javascript/jquery, css dev with no cli tools. I decided to dive head first after seeing how amazing these tools are and having that 'AHA' moment while using them.
I finished the first part of the tutorial which was setting up node, npm, etc... I created a git repository (here https://github.com/drpcken/tab_tracker), made my first commit (wow that was fun) and started going through the tutorial after getting all my dependencies configured and using nodemon and eslint in the terminal to see issues.
Now my project has it's main project folder, and then a client and server subfolder that separates my frontend (vue) and backend (express). The tutorial had me setup eslint using the standard style guide. I quickly realized I didn't want this since standard doesn't require semicolons at the end of each line (I'm old fashioned and preferred them). I then realized that the linting I wanted was airbnb. So last night, while working in my server folder I ran the command to init my eslint: node ./node_modules/eslint/bin/eslint.js --init and changed the style guide to airbnb. It worked beautifully, and I happily committed my changed to my repository this morning.
When I woke up and started studying again this morning, it dawned on me that my client folder also needed to have the eslint initialized and switched to airbnb style guide. So I did so, the same way I initlaized eslint on my server folder. However, it seems that it didn't take. If I add a semicolon to the end of one of my js files in the client folder, my compiler/terminal complains:
✘ http://eslint.org/docs/rules/semi Extra semicolon
src/router/index.js:2:32
import Router from 'vue-router';
I have no clue why this would happen. I configured eslint to use airbnb the same way as my server folder. Here is a link to my repo: https://github.com/drpcken/tab_tracker
In short: switching from standard style guide to airbnb lints differently in one folder than the other. server folder lints properly with airbnb (requiring semicolon) but my client folder, using the same airbnb linting does not (gives an error when I add semicolons).
Your server side code uses require whereas your client side code does it using import. So yeah, you cannot actually compare the validity of the same amongst both of them.
If you have the look at the documentation here ( which you may trace from the link above the error snippet you shared ), you may realize this : It is not the airbnb style guide but the eslint default rule for ASI ( aka automatic semicolon insertion) . You may wish to remove the influence of the same from your code.
Addendum : As Fabio Antunes just commented, you may wish to remove the eslint-standard from your package.json. Let us know if that helps.

How to share eslint file accross a team?

Background
I have an eslint file that I use across multiple Nodejs projects with my team. This file is important and I need to use it in every project, so I end up copying it over and over again.
Problem
This is a terrible idea because If I make a change to the eslint file, I need to manually copy/paste it into all the other projects and sometimes I forget which projects have the updated file and which projects don't.
Objective
My objective here would be to make it automatic. My first idea was to publish the eslint file in NPM, and then manage it via there.
The problem with this approach is that if I do npm install, NPM will place my lint file into the node_modules directory and thus nothing will work.
This file needs to be at the root of the project, side by side with package.json.
Question
How do I share this eslint file across multiple projects automatically?
Answer
Turns out that you can use NPM packages to share ESLint files across multiple projects and teams, which was unknown to me:
http://engineering.invisionapp.com/post/sharing-eslint-across-teams/
The official documentation details how this can be done, and which conventions to follow:
http://eslint.org/docs/developer-guide/shareable-configs#creating-a-shareable-config

Node.js/Babel 6/Devtool: Source files structure breaks with "babel-register" added

I recently started to use the new "devtool" module for debugging Node.js in Chrome Dev Tools.
The debugging process was a dream until I tried to use some ES6 code by using require("babel-core/register"); in the entry point of my application.
I could still use the devtool debugger but everything except my "node_modules" files where dumped into the "no domain" folder.
I assume the es6->es5 compiling needs some sort sourcemap to keep the folder structure possible.
Any ideas?
Way late to this but hope this helps someone, here goes.
From my understanding you're trying to use es6 features when running projects using the devtool command to server projects via Chrome Dev Tools?
To do this follow the babel docs on setting up a new project (make sure you have a .babelrc) then server your projects by running
devtool -r babel-register [MY_FILE_NAME.js]
Instead of simply devtool [MY_FILE_NAME.js]
You don't need to add any imports in your app's entry point if you followed the babel docs correctly.
see https://github.com/Jam3/devtool

Node.js - How do I use modules from another project without copying code?

To be completely specific:
I am writing a Node.js app that is intended to be a websocket bot for Slack.
A Node project exists that abstracts the majority of the Slack API. (It is NOT an npm module.)
I'm not overly familiar with grunt, etc. but I can get the dependencies to install and utilize all this code by placing my own mybot.js in the root folder of this git clone and running node mybot.js with mybot.js being based on the files in the example folder.
Committing to my own repository, I don't want to commit any of the aforementioned project code -- it's not mine! I do, however, want it as a dependency. Unfortunately, this code by Slack is not an npm module that makes it easy to do. The project has a /bin folder and a /src folder full of coffee script, etc. that grunt builds to .js files.
The Slack project code has its own dependencies. In my way of thinking, those are sub-dependencies for me, or cascading dependencies. My project only depends on whatever the Slack project depends on.
I would like to be able to update my project with updates (manually, or via build) from the git repo of the Slack project as needed.
It seems there must be a way for me to include this project as a dependency, and once built, properly reference it's bin and src folder objects (bin/slack, src/message, client, channel, user, etc.) without committing it to my own repository. Especially great if it could be in a subfolder separate from my own model definitions. In a way, this seems no different to me than including jQuery in my website layout via a CDN. I'm only asking for the jQuery project and depending on my link flavor, I can get a specific version or the latest version, etc.
So, it turns out the comment by Ben pointing me to the npmjs.com slack-client npm module was the help I really needed. I just didn't really know how to ask the right question, I think.
And while I hate to look a gift horse in the mouth, a little more than a link, Ben, would've saved me another three hours, probably. Perhaps: "It is an npm module, not just a project from github." But thank you, even if it took me a while to decipher what you were saying.

Resources