Forem: Andre Nunes

How to use Prettier to lint Ruby files

Andre Nunes — Tue, 27 Jun 2023 11:16:04 +0000

When it comes to maintaining clean and consistent code in Ruby on Rails applications, proper linting is crucial. Prettier is a popular code formatter that can be used to enforce consistent code style and formatting in your Ruby files. In this blog post, we will guide you through the process of setting up Prettier as a code formatter for your Ruby files in Visual Studio Code (VSCode).

Step 1: Install the Prettier Extension in VSCode
The first step is to install the Prettier extension in VSCode. Open the Extensions sidebar, search for "Prettier - Code Formatter", and click the Install button.

Step 2: Install Prettier for Ruby on Rails
Next, we need to install the Prettier package for Ruby on Rails. Open your project's terminal and run the following command:

npm install --save-dev prettier @prettier/plugin-ruby

Step 3: Install Ruby Dependencies for Prettier
To ensure Prettier works seamlessly with Ruby, we need to install some Ruby dependencies. Run the following command in your terminal:

gem install bundler prettier_print syntax_tree syntax_tree-haml syntax_tree-rbs

Step 4: Create a Default Prettier Configuration File
Prettier allows you to customize the formatting options according to your preferences. Create a file named .prettierrc.yml in the root directory of your Rails application and add the following content:

tabWidth: 2
semi: false
singleQuote: true
trailingComma: "none"

rubyArrayLiteral: true
rubyHashLabel: true
rubyModifier: true
rubySingleQuote: true
rubyToProc: false

All the ruby properties are available here so feel free to modify these options based on your desired code style.

Step 5: Update VSCode Settings
To set Prettier as the default formatter for Ruby files in VSCode, we need to update the settings. Open your VSCode settings file (settings.json) and add the following configuration:

{
    "[ruby]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true,
        "editor.tabSize": 2,
    },
    "ruby.lint": {
        "rubocop": true
    }
}

These settings specify that Prettier should be the default formatter for Ruby files and that formatting should be applied automatically on save. Additionally, we enable the RuboCop linter for Ruby files to ensure both code style and quality are maintained.

Tip: You can add node_modules, package.json and package-lock.json to .gitignore to not commit them to git.

Extra

From plugin-ruby repo we can use Prettier and Rubocop.

Prettier provides a RuboCop configuration file to disable the rules which would clash. To enable this file, add the following configuration at the top of your project's .rubocop.yml:

inherit_from:
  - node_modules/@prettier/plugin-ruby/rubocop.yml

If you don't have a .rubocop.yml file in your project the default plugin-ruby will use the default ones present on the plugin.

Conclusion

By following these steps, you can easily set up Prettier as a code formatter for your Ruby files in VSCode. With Prettier's powerful formatting capabilities, you can enforce consistent code style and improve the readability of your Ruby on Rails applications. Happy coding!

Source: https://github.com/prettier/plugin-ruby

Connecting React Native to localhost

Andre Nunes — Tue, 28 Apr 2020 08:44:21 +0000

This is something that happens to me on every React Native project.

How can I make a request to my local API (that runs on localhost)?

To be able to do a request to your local machine you have to do two things.

First, you must use your machine IP as the base URL for the request.

To discover your IP, just type this command on your console and look for the inet that looks like 192.168.1.200.

ifconfig | grep inet

---

**inet** 192.168.1.200 netmask ...

After that you will need to update your Android and iOS configurations.

Android

One of the problems may be related to CLEARTEXT HTTP, which protects apps from accidental usage of cleartext traffic.

Starting with Android 9 (API level 28), cleartext support is disabled by default.

* from Android Developers

Which means that Android can only make a request to HTTPS sources. So we need to allow our application to use HTTP sources.

In the AndroidManifest.xml file, we need to add these lines:

<manifest ...>
  <uses-permission android:name="android.permission.INTERNET" />

  <application
    android:name=".MainApplication"
    android:usesCleartextTraffic="true"  
    android:networkSecurityConfig="@xml/network\_security\_config"...>

    <activity android:name=".MainActivity" ...>
      ...
    </activity>
  </application>
</manifest>

This will allow our application to connect to EVERY HTTP source. But we want to allow only your machine’s IP. So to do that we will need to create the network_security_config.xml file in the folder main/res/xml.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false"> localhost </domain>
    <domain includeSubdomains="false"> 10.0.2.2 </domain>
    <domain includeSubdomains="false"> 192.168.1.200 </domain>
    <base-config cleartextTrafficPermitted="true"/>
  </domain-config>
</network-security-config>

This file restricts the HTTP domains that our app can communicate with. The IP 10.0.2.2 is an alias for the emulator to 127.0.0.1, and 192.168.1.200 is our machine’s IP.

After that we need to set the domain url on the Android emulator. So open Dev Settings by clicking CMD + M and then click on Debug server host & port for device. On this modal we add our machine’s IP 192.168.1.200.

iOS

On the iOS side we will have the same issue, we need to allow our app to do requests to *HTTP * sources.

By default, iOS will block any request that’s not encrypted using SSL. If you need to fetch from a cleartext URL (one that begins with http) you will first need to add an App Transport Security exception. If you know ahead of time what domains you will need access to, it is more secure to add exceptions only for those domains; if the domains are not known until runtime you can disable ATS completely. Note however that from January 2017, Apple's App Store review will require reasonable justification for disabling ATS. See Apple's documentation for more information.

* from React Native

To do that we will need to update our Info.plist file and add the NSAppTransportSecurity key.

<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
  <dict>
  <key>localhost</key>
  <dict>
    <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
    <true/>
  </dict>
  </dict>
</dict>

On iOS we don’t need to define our machine’s IP because it translates localhost to that.

After that all we need to do is re-install our app on the emulator and it’s done, with this you can now make requests to your local API.

Note: This should only be used on local development environment, don’t commit this to your production app.

Recommended links

I’m a software developer from Portugal, currently working at Runtime Revolution as a front-end and mobile developer.

Runtime Revolution
anunes9 - Overview

How to start with React Native

Andre Nunes — Tue, 17 Mar 2020 11:15:04 +0000

In this article, I’ll tell you what you need to bootstrap a React Native app.

Photo by Monica Sauro on Unsplash

So what is React Native?

React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces. (…)

* from React Native

React Native allows you to create Android and iOS applications with the same code base, that behave nearly the same using all the resources of React with a little tweak.

Setting Up Your Development Environment

The installation process that is described on the React Native site is well documented and easy to follow, but here is the short version. I use a MacBook Pro as my development machine so the commands will be for macOS.

Installation process

Install Xcode and Android Studio
Install node and watchman

Install Java SDK

Install Xcode command line tools

Open Xcode, then choose the Preferences… menu.

Go to Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

Install CocoaPods

Install react-native-debugger

And you are ready to go.

Now what you need to do is bootstrap your application.

React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using npx, which ships with Node.js. (…)

* from React Native

After you create your app you can choose to run the app on iOS or Android.

To open the app on iOS just run this command, it will open the iOS simulator and install the app.

To open the app on Android you will need to create a virtual device on Android Studio, open the virtual device and run the following command.

And there you go, the app is running!

Debugging

To use react-native-debugger you need to enable remote JS debugging on the simulator option:

On iOS press CMD + D and click on Debug JS Remotely.
On Android press CMD + P .

A nice feature of React Native is Hot Reloading, which allows you to see the code changes in real time without having to restart the app.

To enable this option, open the simulator options and click on Enable Hot Reloading.

At this point you have your React Native environment set and ready to start coding some apps.