How to share ESlint settings across multiple SublimeText projects - sublimetext3

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.

Related

How can I synchronise configs such as tsconfig, eslintconfig, prettier across different projects?

My team develops different micro services with Node, using tools such as Typescript, ESLint, and Prettier among others. These tools have configuration files that are located in the project root. (This is important, because git submodules, as far as I understand, can only be used on selected sub-folders).
We change this configuration files from time to time, as our tools improve and offer new capabilities. However, its tiresome to copy these new settings to all the different services we maintain. What's a good way to sync them between different projects and keep things DRY?
You can create a npm-package and use it with all projects. That way you will also get versioning for your settings.

How to deal with node_modules in PhpStorm

I have been setting up my development environment for my Laravel/AngularJS project. My IDE is JetBrains PhpStorm. I am wondering what are the best practices for configuring the IDE to deal with the node_modules (or bower_components or vendor for my PHP) folder, so that:
It is not included in the code inspection as far as the modules' internal code is concerned.
It is included in the code inspection as far as references in my own code to the modules is concerned.
It is included in Autocomplete or Code Navigation (Ctrl+click on methods)
To make it more clear: I want to be able to Ctrl+click on methods of my node modules and be redirected to the source code of these modules. I also want to be warned if I write a node module method wrong, or if it does not exist. Also autocomplete a method, when I press Ctrl+Space. But I don't want the internal code of my node modules to be included in code inspection, because it takes a lot of time to inspect all the modules, and they are supposed to be ok, so I don't need to inspect them.
I already tried two solutions:
Marking the folders as excluded: This does not work because the folders are totally excluded from the project and redirection and inspection does not work at all
Creating a specific Scope (in PhpStorm Settings), that includes all files except the node_modules folder, to use when I manually run Code Inspection: It is impossible to exclude the node_modules folder, because my IDE recognizes it as a module "I think" (it has [webapp] next to it in the Project explorer). I could however exclude bower_components and vendor.
Regardless my tries, what is the best way to deal with it?
As it's mentioned in help, PhpStorm auto-excludes node_modules folder from indexing for better performance, adding the direct dependencies listed in package.json to javascript libraries for completion, etc. So the best way to handle node_modules is relying on the IDE default procedures

How can I add prettier to my glitch projects?

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).

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

Using angular-ui-tinymce with JSPM - unable to load templates and plugins

I have the same problem that has already been documented on GitHub here. ui-tinymce references a number of dependencies which cannot be reached in my application.
GET http://localhost:8080/jspm_packages/github/tinymce/tinymce-dist#4.3.12/themes/modern/theme.min.js # angular.js:6084
tinymce.js:9426 Failed to load: /jspm_packages/github/tinymce/tinymce-dist#4.3.12/themes/modern/theme.min.js
I am able to use the workaround suggested in the github issue above, which changes the baseURL. This works fine in my development environment. However, when I run jspm bundle-sfx it does not pick up these dependencies and I am left in the same situation without templates or plugins.
What is the best way to address this? Can angular-ui-tinymce be broken down so that the dependent files are available in separate packages? Or should I just use gulp to get around this problem?
I tried using Gulp to concatenate the missing files, however this will not work because by default tinymce still expects the files to be at the relative locations which it uses in its own internal file structure.
I still think it would be helpful for Tinymce to provide separate packages for the most common themes, however I admit that there are a lot of themes and plugins so this would be a fair amount of work.
In the end the simplest thing to was to copy the theme and plugin files into the "correct" relative directories within my own source code. This way I can change the relative baseURL for tinymce and it will be correct when I run it in production as well as development environments.
This way I can run jspm bundle-sfx and it will bundle these files along with everything else. However you may have to import the files explicitly if you do not serve the area statically in your application. For example:
import 'sysadmin/app/tinymce/themes/modern/theme';

Resources