Prettier

Prettier

DevOps / Build, Test, Deploy / Code Review
Needs advice
on
ESLintESLintPrettierPrettier
and
SonarQubeSonarQube

We have Ember.js applications also React applications, currently, we are using ESLint + Prettier, What values does the SonarQube provide in addition to this?

READ MORE
4 upvotes·40.9K views
Replies (3)
Software Consultant at CODIUM·
Recommends
on
SonarQube
at
()

ESLint and Prettier should provide you a clean, beautiful, less-bug code but there are some (as I can think of) that SonarQube could help improving your code more, which are:

  • "Security Hotspot" such as detecting plain credentials in source code, regex validation, and etc, which both can't detect for.
  • finding "Code Smell" (code which might lead into a bug) in your source code
  • finding vulnerability, for example, bad configuration and weak cipher.
  • finding a block of code which might cost you a bad performance, for example, nested loops.
  • a lot more.

Sometimes SonarQube checks might be annoying, but after you adjusted it to fit with your coding style, it should be very useful!

READ MORE
7 upvotes·393 views
Senior Fullstack Developer at QUANTUSflow Software GmbH·

On top of linting and prettifying, sonar cube gives you hints about vulnerabilities and code smells. So it has its value in checking semantics for you as well. The degree of this is easily configurable. It also can give you hints on how much effort fixes might take. The best advice is to try it on your code base and evaluate if the generated reports provide additional value to your team.

READ MORE
6 upvotes·619 views
View all (3)
Senior Fullstack Developer at QUANTUSflow Software GmbH·

Our whole DevOps stack consists of the following tools:

  • GitHub (incl. GitHub Pages/Markdown for Documentation, GettingStarted and HowTo's) for collaborative review and code management tool
  • Respectively Git as revision control system
  • SourceTree as Git GUI
  • Visual Studio Code as IDE
  • CircleCI for continuous integration (automatize development process)
  • Prettier / TSLint / ESLint as code linter
  • SonarQube as quality gate
  • Docker as container management (incl. Docker Compose for multi-container application management)
  • VirtualBox for operating system simulation tests
  • Kubernetes as cluster management for docker containers
  • Heroku for deploying in test environments
  • nginx as web server (preferably used as facade server in production environment)
  • SSLMate (using OpenSSL) for certificate management
  • Amazon EC2 (incl. Amazon S3) for deploying in stage (production-like) and production environments
  • PostgreSQL as preferred database system
  • Redis as preferred in-memory database/store (great for caching)

The main reason we have chosen Kubernetes over Docker Swarm is related to the following artifacts:

  • Key features: Easy and flexible installation, Clear dashboard, Great scaling operations, Monitoring is an integral part, Great load balancing concepts, Monitors the condition and ensures compensation in the event of failure.
  • Applications: An application can be deployed using a combination of pods, deployments, and services (or micro-services).
  • Functionality: Kubernetes as a complex installation and setup process, but it not as limited as Docker Swarm.
  • Monitoring: It supports multiple versions of logging and monitoring when the services are deployed within the cluster (Elasticsearch/Kibana (ELK), Heapster/Grafana, Sysdig cloud integration).
  • Scalability: All-in-one framework for distributed systems.
  • Other Benefits: Kubernetes is backed by the Cloud Native Computing Foundation (CNCF), huge community among container orchestration tools, it is an open source and modular tool that works with any OS.
READ MORE
30 upvotes·2 comments·9.3M views
Larry Gryziak
Larry Gryziak
·
April 30th 2020 at 6:34PM

So why is your deployment different for your (Heroku) test/dev and your stage/production?

·
Reply
Simon Reymann
Simon Reymann
·
May 1st 2020 at 10:32AM

When it comes to testing our web app we do not demand great computational resources and need a very simple, convenient and fast PaaS solution for deploying the app to our testers. In production though, the demand of great computational resources can rise very fast. With Amazon we are able to control that in better way.

·
Reply
Senior Fullstack Developer at QUANTUSflow Software GmbH·

Our whole Vue.js frontend stack (incl. SSR) consists of the following tools:

  • Nuxt.js consisting of Vue CLI, Vue Router, vuex, Webpack and Sass (Bundler for HTML5, CSS 3), Babel (Transpiler for JavaScript),
  • Vue Styleguidist as our style guide and pool of developed Vue.js components
  • Vuetify as Material Component Framework (for fast app development)
  • TypeScript as programming language
  • Apollo / GraphQL (incl. GraphiQL) for data access layer (https://apollo.vuejs.org/)
  • ESLint, TSLint and Prettier for coding style and code analyzes
  • Jest as testing framework
  • Google Fonts and Font Awesome for typography and icon toolkit
  • NativeScript-Vue for mobile development

The main reason we have chosen Vue.js over React and AngularJS is related to the following artifacts:

  • Empowered HTML. Vue.js has many similar approaches with Angular. This helps to optimize HTML blocks handling with the use of different components.
  • Detailed documentation. Vue.js has very good documentation which can fasten learning curve for developers.
  • Adaptability. It provides a rapid switching period from other frameworks. It has similarities with Angular and React in terms of design and architecture.
  • Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. Smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
  • Large scaling. Vue.js can help to develop pretty large reusable templates.
  • Tiny size. Vue.js weights around 20KB keeping its speed and flexibility. It allows reaching much better performance in comparison to other frameworks.
READ MORE
23 upvotes·1 comment·4.8M views
rishabh2712
rishabh2712
·
April 25th 2020 at 6:24AM

Thanks a lot for sharing.

·
Reply
Needs advice
on
ESLintESLintSass Lint Sass Lint
and
StylelintStylelint

Scenario: I want to integrate Prettier in our code base which is currently using ESLint (for .js and .scss both). The project is using gulp.

It doesn't feel quite right to me to use ESLint, I wonder if it would be better to use Stylelint or Sass Lint instead.

I completed integrating ESLint + Prettier, Planning to do the same with [ Stylelint || Sasslint || EsLint] + Prettier.

And have gulp 'fix' on file save (Watcher).

Any recommendation is appreciated.

READ MORE
7 upvotes·435.9K views
Replies (3)
Senior Frontend Developer at Landbot.io·
Recommends
on
ESLint

In the case of .js files I would recommend using both Eslint and Prettier.

You can set up Prettier as an Eslint rule using the following plugin:

https://github.com/prettier/eslint-plugin-prettier

And in order to avoid conflicts between Prettier and Eslint, you can use this config:

https://github.com/prettier/eslint-config-prettier

Which turns off all Eslint rules that are unnecessary or might conflict with Prettier.

READ MORE
6 upvotes·1 comment·154.4K views
Alex Spieslechner
Alex Spieslechner
·
August 7th 2020 at 7:05PM

prettier officially discourages the use of eslint-plugin-prettier.

https://prettier.io/docs/en/integrating-with-linters.html

·
Reply
Software Engineer ·

you don't actually have to choose between these tools as they have vastly different purposes. i think its more a matter of understanding how to use them.

while eslint and stylelint are used to notify you about code quality issues, to guide you to write better code, prettier automatically handles code formatting (without notifying me). nothing else.

prettier and eslint both officially discourage using the eslint-plugin-prettier way, as these tools actually do very different things. autofixing with linters on watch isnt a great idea either. auto-fixing should only be done intentionally. you're not alone though, as a lot of devs set this up wrong.

i encourage you to think about what problem you're trying to solve and configure accordingly.

for my teams i set it up like this: - eslint, stylelint, prettier locally installed for cli use and ide support - eslint config prettier (code formatting rules are not eslints business, so dont warn me about it) - vscode workspace config: format on save - separate npm scripts for linting, and formatting - precommit hooks (husky)

so you can easily integrate with gulp. its just js after all ;)

READ MORE
5 upvotes·141.5K views
View all (3)
Software Engineer ·

When I switched to Visual Studio Code 12 months ago from PhpStorm I was in love, it was great. However after using VS Code for a year, I see myself switching back and forth between WebStorm and VS Code. The VS Code plugins are great however I notice Prettier, auto importing of components and linking to the definitions often break, and I have to restart VS Code multiple times a week and sometimes a day.

We use Ruby here so I do like that Visual Studio Code highlights that for me out of the box, with WebStorm I'd need to probably also install RubyMine and have 2 IDE's going at the same time.

Should I stick with Visual Studio Code, or switch to something else? #help

READ MORE
Johnny Bell's Stack Decision | StackShare (stackshare.io)
13 upvotes·963.6K views
Replies (15)
Erik Ostrom·
Recommends
on
RubyMine

If you're working with both Ruby and JavaScript, buy RubyMine and shut down the other two. It's much better for Ruby than Visual Studio Code is. It can also do everything WebStorm does, if you install the plugins you need from JetBrains, and they all work together nicely.

READ MORE
13 upvotes·228.6K views
Software Developer ·
Recommends
on
RubyMine

If you install RubyMine, you shouldn't need WebStorm, as all the functionality of WebStorm appears to be included in RubyMine. (See here: https://softwareengineering.stackexchange.com/a/132950).

I've used PhpStorm for several years and have never needed to open (or even download) WebStorm for anything front-end or JavaScript related.

READ MORE
11 upvotes·1 comment·228.5K views
Johnny Bell
Johnny Bell
·
August 16th 2019 at 3:15AM

Marc, I was using PhpStorm for like 7 years when I was in magento and a PHP backend and I never needed WebStorm either as it had all the same features... you are convincing me to switch to RubyMine... Hmmmmmm 🤔

·
Reply
View all (15)
Software Engineer ·
Shared a protip
on
Visual Studio CodeVisual Studio Code

Prettier not formatting code on save in Visual Studio Code? - I've come across the same issue and took me a long time googling around to find the issue.

It is actually a very simple fix. Add the below to your Visual Studio Code settings.json

"[javascript]": {
    "editor.formatOnSave": true
},
"[javascriptreact]": {
  "editor.formatOnSave": true
}
READ MORE
11 upvotes·95.1K views