Skip to content

Instantly share code, notes, and snippets.

@tupywebteam

tupywebteam/Add-ESLint-to-Laravel-Mix.md

Forked from EmadAdly/Add-ESLint-to-Laravel-Mix.md
Created June 9, 2022 13:11
Show Gist options
  • Save tupywebteam/7fb1008899f6c0435832e9b2d7f67d3a to your computer and use it in GitHub Desktop.
Save tupywebteam/7fb1008899f6c0435832e9b2d7f67d3a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @EmadAdly EmadAdly revised this gist Jun 17, 2018. 1 changed file with 77 additions and 77 deletions.
    154 changes: 77 additions & 77 deletions Add-ESLint-to-Laravel-Mix.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,114 +2,114 @@
    ### 1. Add eslint and eslint-loader and eslint-plugin-vue to your projects package.json file

    ```sh
    npm i eslint eslint-loader eslint-plugin-vue --save-dev
    npm i eslint eslint-loader eslint-plugin-vue --save-dev
    ```

    ### 2. Create a base configuration by `--init`

    ```sh
    ./node_modules/.bin/eslint --init
    ./node_modules/.bin/eslint --init
    ```
    it will ask you a number of questions for my laravel projects I use the following:
    it will ask you a number of questions for my laravel projects I use the following:

    * Are you using ECMAScript 6 features? Yes
    * Are you using ES6 modules? Yes
    * Where will your code run? Browser
    * Do you use CommonJS? Yes
    * Do you use JSX? No
    * What style of indentation do you use? Tabs
    * What quotes do you use for strings? single
    * What line endings do you use? Unix
    * Do you require semicolons? No
    * What format do you want your config file to be in? JSON
    * Are you using ECMAScript 6 features? Yes
    * Are you using ES6 modules? Yes
    * Where will your code run? Browser
    * Do you use CommonJS? Yes
    * Do you use JSX? No
    * What style of indentation do you use? Tabs
    * What quotes do you use for strings? single
    * What line endings do you use? Unix
    * Do you require semicolons? No
    * What format do you want your config file to be in? JSON

    You’ll end up with a new file called .eslintr.json within your project root like so.
    You’ll end up with a new file called .eslintr.json within your project root like so.

    ```json
    {
    "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
    "sourceType": "module"
    },
    "rules": {
    "indent": [
    "error",
    "tab"
    ],
    "linebreak-style": [
    "error",
    "unix"
    ],
    "quotes": [
    "error",
    "single"
    ],
    "semi": [
    "error",
    "always"
    ]
    }
    {
    "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
    "sourceType": "module"
    },
    "rules": {
    "indent": [
    "error",
    "tab"
    ],
    "linebreak-style": [
    "error",
    "unix"
    ],
    "quotes": [
    "error",
    "single"
    ],
    "semi": [
    "error",
    "always"
    ]
    }
    }
    ```

    ### 3. register the eslint-vue-plugin in your .eslint.json file by adding it to the extends block.

    ```json
    ...
    "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
    ],
    ...
    ...
    "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
    ],
    ...
    ```
    There are actually a number of different default config values for the eslint vue plugin that add increasingly stricter rule sets to be applied to the linter. They are as follows:
    There are actually a number of different default config values for the eslint vue plugin that add increasingly stricter rule sets to be applied to the linter. They are as follows:

    ```json
    plugin:vue/base
    plugin:vue/essential
    plugin:vue/strongly-recommended
    plugin:vue/recommended
    plugin:vue/base
    plugin:vue/essential
    plugin:vue/strongly-recommended
    plugin:vue/recommended
    ```
    ### 4. Adding a new build step by adding a new script to our package.json

    ```json
    {
    "script": {
    ...
    "eslint": "./node_modules/.bin/eslint resources/assets/js/ test/ --ext .js,.vue"
    },
    }
    {
    "script": {
    ...
    "eslint": "./node_modules/.bin/eslint resources/assets/js/ test/ --ext .js,.vue"
    },
    }
    ```

    ### 5. Add ESLint to Laravel Mix

    Add the following to the beginning of the Laravel Mix configuration file webpack.mix.js
    Add the following to the beginning of the Laravel Mix configuration file webpack.mix.js

    ```json
    const { mix } = require('laravel-mix')

    // config eslint
    mix.webpackConfig({
    module: {
    rules: [
    {
    enforce: 'pre',
    exclude: /node_modules/,
    loader: 'eslint-loader',
    test: /\.(js|vue)?$/
    },
    ]
    }
    })
    const { mix } = require('laravel-mix')

    // config eslint
    mix.webpackConfig({
    module: {
    rules: [
    {
    enforce: 'pre',
    exclude: /node_modules/,
    loader: 'eslint-loader',
    test: /\.(js|vue)?$/
    },
    ]
    }
    })
    ```
    ### 6. Finally test working
    Then execute `npm run watch` to get a code specification check reminder:
    Then execute `npm run watch` to get a code specification check reminder:

    ```sh
    npm run watch
    npm run watch
    ```
  2. @EmadAdly EmadAdly revised this gist Jun 17, 2018. 1 changed file with 15 additions and 15 deletions.
    30 changes: 15 additions & 15 deletions Add-ESLint-to-Laravel-Mix.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,15 +1,15 @@

    ### 1. Add eslint and eslint-loader and eslint-plugin-vue to your projects package.json file

    ```sh
    ```sh
    npm i eslint eslint-loader eslint-plugin-vue --save-dev
    ```
    ```

    ### 2. Create a base configuration by `--init`

    ```sh
    ```sh
    ./node_modules/.bin/eslint --init
    ```
    ```
    it will ask you a number of questions for my laravel projects I use the following:

    * Are you using ECMAScript 6 features? Yes
    @@ -25,7 +25,7 @@

    You’ll end up with a new file called .eslintr.json within your project root like so.

    ```json
    ```json
    {
    "env": {
    "browser": true,
    @@ -55,42 +55,42 @@
    ]
    }
    }
    ```
    ```

    ### 3. register the eslint-vue-plugin in your .eslint.json file by adding it to the extends block.

    ```json
    ```json
    ...
    "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
    ],
    ...
    ```
    ```
    There are actually a number of different default config values for the eslint vue plugin that add increasingly stricter rule sets to be applied to the linter. They are as follows:

    ```json
    ```json
    plugin:vue/base
    plugin:vue/essential
    plugin:vue/strongly-recommended
    plugin:vue/recommended
    ```
    ```
    ### 4. Adding a new build step by adding a new script to our package.json

    ```json
    ```json
    {
    "script": {
    ...
    "eslint": "./node_modules/.bin/eslint resources/assets/js/ test/ --ext .js,.vue"
    },
    }
    ```
    ```

    ### 5. Add ESLint to Laravel Mix

    Add the following to the beginning of the Laravel Mix configuration file webpack.mix.js

    ```json
    ```json
    const { mix } = require('laravel-mix')

    // config eslint
    @@ -110,6 +110,6 @@
    ### 6. Finally test working
    Then execute `npm run watch` to get a code specification check reminder:

    ```sh
    ```sh
    npm run watch
    ```
    ```
  3. @EmadAdly EmadAdly revised this gist Jun 17, 2018. 1 changed file with 104 additions and 104 deletions.
    208 changes: 104 additions & 104 deletions Add-ESLint-to-Laravel-Mix.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,115 +1,115 @@

    1. Add eslint and eslint-loader and eslint-plugin-vue to your projects package.json file

    ```sh
    npm i eslint eslint-loader eslint-plugin-vue --save-dev
    ```

    2. Create a base configuration by `--init`

    ```sh
    ./node_modules/.bin/eslint --init
    ```
    it will ask you a number of questions for my laravel projects I use the following:

    * Are you using ECMAScript 6 features? Yes
    * Are you using ES6 modules? Yes
    * Where will your code run? Browser
    * Do you use CommonJS? Yes
    * Do you use JSX? No
    * What style of indentation do you use? Tabs
    * What quotes do you use for strings? single
    * What line endings do you use? Unix
    * Do you require semicolons? No
    * What format do you want your config file to be in? JSON

    You’ll end up with a new file called .eslintr.json within your project root like so.

    ```json
    {
    "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
    "sourceType": "module"
    },
    "rules": {
    "indent": [
    "error",
    "tab"
    ],
    "linebreak-style": [
    "error",
    "unix"
    ],
    "quotes": [
    "error",
    "single"
    ],
    "semi": [
    "error",
    "always"
    ]
    ### 1. Add eslint and eslint-loader and eslint-plugin-vue to your projects package.json file

    ```sh
    npm i eslint eslint-loader eslint-plugin-vue --save-dev
    ```

    ### 2. Create a base configuration by `--init`

    ```sh
    ./node_modules/.bin/eslint --init
    ```
    it will ask you a number of questions for my laravel projects I use the following:

    * Are you using ECMAScript 6 features? Yes
    * Are you using ES6 modules? Yes
    * Where will your code run? Browser
    * Do you use CommonJS? Yes
    * Do you use JSX? No
    * What style of indentation do you use? Tabs
    * What quotes do you use for strings? single
    * What line endings do you use? Unix
    * Do you require semicolons? No
    * What format do you want your config file to be in? JSON

    You’ll end up with a new file called .eslintr.json within your project root like so.

    ```json
    {
    "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
    "sourceType": "module"
    },
    "rules": {
    "indent": [
    "error",
    "tab"
    ],
    "linebreak-style": [
    "error",
    "unix"
    ],
    "quotes": [
    "error",
    "single"
    ],
    "semi": [
    "error",
    "always"
    ]
    }
    }
    }
    ```

    3. register the eslint-vue-plugin in your .eslint.json file by adding it to the extends block.

    ```json
    ...
    "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
    ],
    ...
    ```
    There are actually a number of different default config values for the eslint vue plugin that add increasingly stricter rule sets to be applied to the linter. They are as follows:
    ```

    ```json
    plugin:vue/base
    plugin:vue/essential
    plugin:vue/strongly-recommended
    plugin:vue/recommended
    ```
    4. Adding a new build step by adding a new script to our package.json
    ### 3. register the eslint-vue-plugin in your .eslint.json file by adding it to the extends block.

    ```json
    {
    "script": {
    ```json
    ...
    "eslint": "./node_modules/.bin/eslint resources/assets/js/ test/ --ext .js,.vue"
    },
    }
    ```
    "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
    ],
    ...
    ```
    There are actually a number of different default config values for the eslint vue plugin that add increasingly stricter rule sets to be applied to the linter. They are as follows:

    ```json
    plugin:vue/base
    plugin:vue/essential
    plugin:vue/strongly-recommended
    plugin:vue/recommended
    ```
    ### 4. Adding a new build step by adding a new script to our package.json

    ```json
    {
    "script": {
    ...
    "eslint": "./node_modules/.bin/eslint resources/assets/js/ test/ --ext .js,.vue"
    },
    }
    ```

    5. Add ESLint to Laravel Mix
    ### 5. Add ESLint to Laravel Mix

    Add the following to the beginning of the Laravel Mix configuration file webpack.mix.js
    Add the following to the beginning of the Laravel Mix configuration file webpack.mix.js

    ```json
    const { mix } = require('laravel-mix')
    ```json
    const { mix } = require('laravel-mix')

    // config eslint
    mix.webpackConfig({
    module: {
    rules: [
    {
    enforce: 'pre',
    exclude: /node_modules/,
    loader: 'eslint-loader',
    test: /\.(js|vue)?$/
    },
    ]
    }
    })
    // config eslint
    mix.webpackConfig({
    module: {
    rules: [
    {
    enforce: 'pre',
    exclude: /node_modules/,
    loader: 'eslint-loader',
    test: /\.(js|vue)?$/
    },
    ]
    }
    })
    ```
    6. Finally test working
    Then execute `npm run watch` to get a code specification check reminder:
    ### 6. Finally test working
    Then execute `npm run watch` to get a code specification check reminder:
    ```sh
    npm run watch
    ```
    ```sh
    npm run watch
    ```
  4. @EmadAdly EmadAdly renamed this gist Jun 17, 2018. 1 changed file with 0 additions and 0 deletions.
    0 Add ESLint to Laravel Mix → Add-ESLint-to-Laravel-Mix.md
    View file
    File renamed without changes.
  5. @EmadAdly EmadAdly created this gist Jun 17, 2018.
    115 changes: 115 additions & 0 deletions Add ESLint to Laravel Mix
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,115 @@

    1. Add eslint and eslint-loader and eslint-plugin-vue to your projects package.json file

    ```sh
    npm i eslint eslint-loader eslint-plugin-vue --save-dev
    ```

    2. Create a base configuration by `--init`

    ```sh
    ./node_modules/.bin/eslint --init
    ```
    it will ask you a number of questions for my laravel projects I use the following:

    * Are you using ECMAScript 6 features? Yes
    * Are you using ES6 modules? Yes
    * Where will your code run? Browser
    * Do you use CommonJS? Yes
    * Do you use JSX? No
    * What style of indentation do you use? Tabs
    * What quotes do you use for strings? single
    * What line endings do you use? Unix
    * Do you require semicolons? No
    * What format do you want your config file to be in? JSON

    You’ll end up with a new file called .eslintr.json within your project root like so.

    ```json
    {
    "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
    "sourceType": "module"
    },
    "rules": {
    "indent": [
    "error",
    "tab"
    ],
    "linebreak-style": [
    "error",
    "unix"
    ],
    "quotes": [
    "error",
    "single"
    ],
    "semi": [
    "error",
    "always"
    ]
    }
    }
    ```

    3. register the eslint-vue-plugin in your .eslint.json file by adding it to the extends block.

    ```json
    ...
    "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
    ],
    ...
    ```
    There are actually a number of different default config values for the eslint vue plugin that add increasingly stricter rule sets to be applied to the linter. They are as follows:

    ```json
    plugin:vue/base
    plugin:vue/essential
    plugin:vue/strongly-recommended
    plugin:vue/recommended
    ```
    4. Adding a new build step by adding a new script to our package.json

    ```json
    {
    "script": {
    ...
    "eslint": "./node_modules/.bin/eslint resources/assets/js/ test/ --ext .js,.vue"
    },
    }
    ```

    5. Add ESLint to Laravel Mix

    Add the following to the beginning of the Laravel Mix configuration file webpack.mix.js

    ```json
    const { mix } = require('laravel-mix')

    // config eslint
    mix.webpackConfig({
    module: {
    rules: [
    {
    enforce: 'pre',
    exclude: /node_modules/,
    loader: 'eslint-loader',
    test: /\.(js|vue)?$/
    },
    ]
    }
    })
    ```
    6. Finally test working
    Then execute `npm run watch` to get a code specification check reminder:

    ```sh
    npm run watch
    ```