<p>Recently, I created a package with the <a href="https://eslint.org">ESLint</a> settings I like to use in my React projects, as I was tired of always having to configure it when I start new React projects. Publishing a NPM package is just a matter of running <code>npm publish</code> on the directory of your package (considering, of course, that you already have an NPM account and is authenticated on your terminal). But I wanted to automatize this publishing everytime I created a new release.</p>
<p>In order to do that, I used the following GitHub Action:</p>
<pre><code class="highlited-code-wrapper langyaml"><div class="highlited-code" data-language="yaml"># File: .github/workflows/npm-publish.yml

# This workflow will publish a package to NPM when a release is created
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages

name: Publish Package to npmjs

on:
  release:
    types: [created]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          registry-url: https://registry.npmjs.org/
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}</div>
</code></pre><p>If you read the YAML file above (that you should put on the <code>.github/workflows/npm-publish.yml</code> directory of your git repository), you should have noted that the environment variable <code>NODE_AUTH_TOKEN</code> should be defined. Create a new automation access token on the control panel of NPM:</p>
<ol>
<li><p>Access your NPM account and click in &quot;Access tokens&quot;:
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hddbdiev3xhhrl0s09km.png" alt="Access tokens on NPM"></p>
</li>
<li><p>Name your new access token and select the &quot;Automation&quot; type for it:</p>
</li>
</ol>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4oect8iqd17igcbnrrg1.png" alt="Creating access token on NPM"></p>
<ol start="3">
<li>Go to your GitHub repository, click in &quot;Settings &gt; Secrets &gt; Actions &gt; New repository secret&quot;, name it as NODE_AUTH_TOKEN and paste the access token you just got from NPM:</li>
</ol>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wv7pw3j8elyjeoaeehif.png" alt="Create a new secret on the GitHub repository"></p>
<ol start="4">
<li>Create a new release for your package. This should trigger our GitHub Action and publish to NPM.</li>
</ol>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31fsgle783ujl75stld1.png" alt="Creating a new release on GitHub"></p>


Use GitHub actions to publish your package on NPM

<p>Have you ever needed to create an <a href="https://editorconfig.org/">EditorConfig</a> to your programming projects but can never remember all the options you can use? Worry no more: just type <code>npx create-editorconfig -y</code> in your terminal and have one generated for you. Those are the default options:</p>
<pre><code><div class="highlited-code" data-language=""># editorconfig.org
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true</div>
</code></pre><p>If you want to customize the settings or even add more for a different set of files (by defining a glob pattern), just ommit the <code>-y</code> argument in the terminal and answer the prompted questions.</p>
<img src="https://github.com/DouglasdeMoura/create-editorconfig/raw/main/usage.svg" alt="Using create-editorconfig on ZSH" />

<h2>What is EditorConfig?</h2>
<p>EditorConfig is a configuration file (the <code>.editorconfig</code>) that defines the coding styles that a given code editor (such as <a href="https://code.visualstudio.com/">VS Code</a>) should apply in the files. You can even set a different set of rules for the files of your project according to your their extension or directory, by using a <a href="https://en.wikipedia.org/wiki/Glob_(programming)">glob pattern</a>.</p>
<h2>My code editor is not applying the EditorConfig settings</h2>
<p>To apply your <code>.editorconfig</code> rules, your code editor should have a plugin or have EditorConfig rule parsing implemented natively (if you are using VS Code, you must install <a href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig">this extension</a>.</p>
<p><a href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/641onx2wrltmoq1ze501.png" alt="EditorConfig extension on VS Code Marketplace"></a></p>
<h2>How can I contribute to <code>create-editorconfig</code>?</h2>
<p>Please, go to the official <a href="https://github.com/douglasdeMoura/create-editorconfig">GitHub repository</a> and open an issue.</p>
<h2></h2>


Douglas Moura

Douglas Moura

#npm

Use GitHub actions to publish your package on NPM

Use this NPM script to create your EditorConfig files