Home
Forums
New posts
Search forums
What's new
New posts
New resources
New profile posts
Latest activity
Resources
Latest reviews
Search resources
Members
Current visitors
New profile posts
Search profile posts
DMCA Policy
Log in
Register
What's new
Search
Search
Search titles only
By:
New posts
Search forums
Menu
Log in
Register
Install the app
Install
FEEL FREE TO SHARE TUTORIALS, YOUR SKILS & KNOWLEDGE ON CODING, SCRIPTS, THEMES, PLUGINS OR ANY RESOURCES YOU HAVE WITH THE COMMUNITY-
Click Here To Post Your Request,
JOIN COMPUTER REPAIR FORUM
Home
Forums
TUTORIALS
CODING TUTORIALS
Node.js
Custom Neutrino Linting
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Reply to thread
Message
<blockquote data-quote="codeguru" data-source="post: 54" data-attributes="member: 2"><p><img src="https://cdn-images-1.medium.com/max/1600/1*xArsbAlIa6VmtK0u-VuxTA.png" alt="Neutrino" class="fr-fic fr-dii fr-draggable " style="" /></p><p></p><p>Last week my friend Eli Perelman shared <a href="https://davidwalsh.name/neutrino" target="_blank">Modern JavaScript Apps with Neutrino</a>, an awesome new Node.js tool for creating amazing apps with minimal fuss. No need to learn webpack, scour babel plugins, or search for what exactly is required to get a React.js app up and running — just install Neutrino and go! I’ve been super impressed with Eli’s work and the ease of development for customization.</p><p></p><p>One important customization for me was the ability to modify default linting rules and running the lint routine from command line when I wanted to. Neutrino does provide a default ESLint rule set, and does lint while you modify your code, but testing if linting passes within CI is also important. Let’s look at how we can create custom linting rules with our own custom preset!</p><p></p><h2>Step 1: Creating a Preset</h2><p></p><p>Presets allow you to customize elements of your Neutrino app, like ESLint rules, Babel plugins, pathing, and other app-wide global configuration. Let me first show you the code for custom linting rules and then I’ll explain what’s going on:</p><p></p><p></p><p>const lint = require('neutrino-lint-base');</p><p>const merge = require('deepmerge');</p><p></p><p>module.exports = neutrino => {</p><p> // Implement custom linting</p><p> lint(neutrino);</p><p> neutrino.config.module</p><p> .rule('lint')</p><p> .loader('eslint', props => merge(props, {</p><p> options: {</p><p> globals: ['describe', 'expect', 'jest', 'test', 'document', 'window', 'fetch'],</p><p> rules: {</p><p> // Don't require () for single argument arrow functions</p><p> 'arrow-parens': 'off',</p><p> // Don't require trailing commas</p><p> 'comma-dangle': 'off',</p><p> // Don't require file extensions on imports</p><p> 'import/extensions': 'off',</p><p> // Don't mark as unresolved without extensions</p><p> 'import/no-unresolved': 'off',</p><p> // Don't let ESLint tell us how to use whitespace for imports</p><p> 'padded-blocks': 'off',</p><p> // Hold off on propTypes for now</p><p> 'react/prop-types': 'off'</p><p> },</p><p> baseConfig: {</p><p> extends: ['airbnb-base', 'plugin:react/recommended']</p><p> }</p><p> }</p><p> }))</p><p>};</p><p></p><p></p><p>Sending [ICODE]neutrino[/ICODE] into [ICODE]lint[/ICODE] preps the Neutrino app for linting. Next we use [ICODE]merge[/ICODE] to deep merge the custom linting config with our own rules:</p><p></p><ol> <li data-xf-list-type="ol">Extend [ICODE]airbnb-base[/ICODE] linting rules with are a <a href="https://github.com/airbnb/javascript" target="_blank">very popular set of ES6 guidelines</a></li> <li data-xf-list-type="ol">Extend recommended React.js linting guidelines</li> <li data-xf-list-type="ol">Specify which globals we’ll allow when linting</li> <li data-xf-list-type="ol">Set values for very specific ESLint rules we do or don’t want to enforce</li> </ol><p></p><p>Of course the rules I’ve customized above are completely my preference; you don’t need to extend any existing ESLint libraries (like I did with airbnb and React) and you can enforce whichever rules you’d like.</p><p></p><h2>Step 2: [ICODE].eslintrc.js[/ICODE]</h2><p></p><p><em>If</em> you want to run linting from the command line at any time (in the case of CI or a post-commit hook, for example), you will need to create a [ICODE].eslintrc.js[/ICODE] file to kick off the linting:</p><p></p><p></p><p>const Neutrino = require('neutrino');</p><p>const pkg = require('./package.json');</p><p>const api = new Neutrino(pkg.config.presets);</p><p></p><p>module.exports = api.custom.eslintrc();</p><p></p><p></p><p>[ICODE].eslintrc.js[/ICODE] creates a Neutrino instance with presets defined in [ICODE]package.json[/ICODE] (we’ll get to that in the next section) and exposes a [ICODE]eslintrc()[/ICODE] function that runs the lint routine.</p><p></p><h2>Step 3: Modify [ICODE]package.json[/ICODE]</h2><p></p><p>With the preset created with your custom linting rules in mind, a few changes to [ICODE]package.json[/ICODE] must be made. The first is adding this custom preset file to the [ICODE]config.presets[/ICODE] array:</p><p></p><p></p><p>"config": {</p><p> "presets": [</p><p> "neutrino-preset-react",</p><p> "conduit-preset.js"</p><p> ]</p><p>},</p><p></p><p></p><p>Next we’ll need to add Neutrino’s airbnb preset to our dependency list:</p><p></p><p></p><p>yarn add neutrino-preset-airbnb-base -dev</p><p></p><p></p><p>Lastly we’ll add a [ICODE]lint[/ICODE] key to [ICODE]scripts[/ICODE] so that we can run linting from command line:</p><p></p><p></p><p>"scripts": {</p><p> "lint": "./node_modules/eslint/bin/eslint.js --ext .js,.jsx src/ test/",</p><p>}</p><p></p><p></p><p>Now we can run the following from command line:</p><p></p><p></p><p>yarn lint</p><p></p><p></p><p>Also note that the custom linting rule are applied to both the manual [ICODE]lint[/ICODE] command as well as during webpack’s live reload and linting routine!</p><p></p><p>I love Neutrino because it requires minimal configuration to get up and running but custom configuration is easy when you need to. Keep an eye on Neutrino moving forward because development is shipping quickly and the community is rallying behind this amazing project!</p><p></p><p>The post <a href="https://davidwalsh.name/neutrino-linting" target="_blank">Custom Neutrino Linting</a> appeared first on <a href="https://davidwalsh.name" target="_blank">David Walsh Blog</a>.</p><p></p><p><a href="https://tkjs.us/dwb" target="_blank"><img src="https://davidwalsh.name/demo/tjs_block-1.svg" alt="" class="fr-fic fr-dii fr-draggable " style="" /></a></p><p></p><p><a href="https://davidwalsh.name/neutrino-linting" target="_blank">Continue reading...</a></p></blockquote><p></p>
[QUOTE="codeguru, post: 54, member: 2"] [IMG alt="Neutrino"]https://cdn-images-1.medium.com/max/1600/1*xArsbAlIa6VmtK0u-VuxTA.png[/IMG] Last week my friend Eli Perelman shared [URL='https://davidwalsh.name/neutrino']Modern JavaScript Apps with Neutrino[/URL], an awesome new Node.js tool for creating amazing apps with minimal fuss. No need to learn webpack, scour babel plugins, or search for what exactly is required to get a React.js app up and running — just install Neutrino and go! I’ve been super impressed with Eli’s work and the ease of development for customization. One important customization for me was the ability to modify default linting rules and running the lint routine from command line when I wanted to. Neutrino does provide a default ESLint rule set, and does lint while you modify your code, but testing if linting passes within CI is also important. Let’s look at how we can create custom linting rules with our own custom preset! [HEADING=1]Step 1: Creating a Preset[/HEADING] Presets allow you to customize elements of your Neutrino app, like ESLint rules, Babel plugins, pathing, and other app-wide global configuration. Let me first show you the code for custom linting rules and then I’ll explain what’s going on: const lint = require('neutrino-lint-base'); const merge = require('deepmerge'); module.exports = neutrino => { // Implement custom linting lint(neutrino); neutrino.config.module .rule('lint') .loader('eslint', props => merge(props, { options: { globals: ['describe', 'expect', 'jest', 'test', 'document', 'window', 'fetch'], rules: { // Don't require () for single argument arrow functions 'arrow-parens': 'off', // Don't require trailing commas 'comma-dangle': 'off', // Don't require file extensions on imports 'import/extensions': 'off', // Don't mark as unresolved without extensions 'import/no-unresolved': 'off', // Don't let ESLint tell us how to use whitespace for imports 'padded-blocks': 'off', // Hold off on propTypes for now 'react/prop-types': 'off' }, baseConfig: { extends: ['airbnb-base', 'plugin:react/recommended'] } } })) }; Sending [ICODE]neutrino[/ICODE] into [ICODE]lint[/ICODE] preps the Neutrino app for linting. Next we use [ICODE]merge[/ICODE] to deep merge the custom linting config with our own rules: [LIST=1] [*]Extend [ICODE]airbnb-base[/ICODE] linting rules with are a [URL='https://github.com/airbnb/javascript']very popular set of ES6 guidelines[/URL] [*]Extend recommended React.js linting guidelines [*]Specify which globals we’ll allow when linting [*]Set values for very specific ESLint rules we do or don’t want to enforce [/LIST] Of course the rules I’ve customized above are completely my preference; you don’t need to extend any existing ESLint libraries (like I did with airbnb and React) and you can enforce whichever rules you’d like. [HEADING=1]Step 2: [ICODE].eslintrc.js[/ICODE][/HEADING] [I]If[/I] you want to run linting from the command line at any time (in the case of CI or a post-commit hook, for example), you will need to create a [ICODE].eslintrc.js[/ICODE] file to kick off the linting: const Neutrino = require('neutrino'); const pkg = require('./package.json'); const api = new Neutrino(pkg.config.presets); module.exports = api.custom.eslintrc(); [ICODE].eslintrc.js[/ICODE] creates a Neutrino instance with presets defined in [ICODE]package.json[/ICODE] (we’ll get to that in the next section) and exposes a [ICODE]eslintrc()[/ICODE] function that runs the lint routine. [HEADING=1]Step 3: Modify [ICODE]package.json[/ICODE][/HEADING] With the preset created with your custom linting rules in mind, a few changes to [ICODE]package.json[/ICODE] must be made. The first is adding this custom preset file to the [ICODE]config.presets[/ICODE] array: "config": { "presets": [ "neutrino-preset-react", "conduit-preset.js" ] }, Next we’ll need to add Neutrino’s airbnb preset to our dependency list: yarn add neutrino-preset-airbnb-base -dev Lastly we’ll add a [ICODE]lint[/ICODE] key to [ICODE]scripts[/ICODE] so that we can run linting from command line: "scripts": { "lint": "./node_modules/eslint/bin/eslint.js --ext .js,.jsx src/ test/", } Now we can run the following from command line: yarn lint Also note that the custom linting rule are applied to both the manual [ICODE]lint[/ICODE] command as well as during webpack’s live reload and linting routine! I love Neutrino because it requires minimal configuration to get up and running but custom configuration is easy when you need to. Keep an eye on Neutrino moving forward because development is shipping quickly and the community is rallying behind this amazing project! The post [URL='https://davidwalsh.name/neutrino-linting']Custom Neutrino Linting[/URL] appeared first on [URL='https://davidwalsh.name']David Walsh Blog[/URL]. [URL='https://tkjs.us/dwb'][IMG]https://davidwalsh.name/demo/tjs_block-1.svg[/IMG][/URL] [url="https://davidwalsh.name/neutrino-linting"]Continue reading...[/url] [/QUOTE]
Insert quotes…
Verification
Post reply
Richest Freecoded User
Most Freecoin
freecoded
4,838 Freecoin
Davy200
590 Freecoin
J
Johnhendrick
575 Freecoin
S
Smith16
527 Freecoin
nathan69
426 Freecoin
Laureine
415 Freecoin
A
anajeen
370 Freecoin
C
codeguru
287 Freecoin
Tekera
267 Freecoin
A
Akubay
170 Freecoin
Home
Forums
TUTORIALS
CODING TUTORIALS
Node.js
Custom Neutrino Linting
This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.
Accept
Learn more…
Top