精华内容
下载资源
问答
  • Eslint

    2021-02-02 18:35:39
    查看eslint包会生成的命令行的名称 npm info eslint --> bin字段;bin字段中就是生成的命令行工具的名称 安装eslint npm i eslint -D 查阅eslint使用的帮助文档 npx eslint -h 创建eslint的配置文件 npx eslint...

    初始化项目的配置文件

    npm init -y
    

    查看eslint包会生成的命令行的名称

    npm info eslint  --> bin字段;bin字段中就是生成的命令行工具的名称
    

    安装eslint

    npm i eslint -D
    

    查阅eslint使用的帮助文档

    npx eslint -h
    

    创建eslint的配置文件

    npx eslint --init
    

    检验代码

    npx eslint ./src
    

    使用eslint自动修复语法相关的错误

    npx eslint ./src --fix
    

    如何跳过eslint检验(魔法注释)

    1. 跳过单行 :  代码  // eslint-disable-line
    2. 跳过多行 :  /* eslint-disable */ 代码 /* eslint-enable */
    

    自定义规则

    .eslintrc.js 中的 rules配置
         0: 关闭规则
         1: 开启警告
         2: 开启错误
         rules: {
            "规则名": 0/1/2
         }
    

    eslint的忽略文件

    .eslintignore
    

    详情见Eslint文档

    展开全文
  • ESLint

    2020-12-23 18:12:20
    规范化标准 规范化是践行前端工程化中重要的一部分 因为软件开发需要多人协同 ...ESLint结合自动化工具或webpack ESLint的衍生工具 Stylelint工具的使用 ESLint介绍 最为主流的JS lint工具检测JS代码

    规范化标准

    规范化是践行前端工程化中重要的一部分

    • 因为软件开发需要多人协同
    • 不同开发者代码风格不同
    • 增加项目开发成本
    • 团队需要明确同一的标准

    需要标准化地方

    • 代码、文档、提交日志
    • 开发中编写的代码
    • 代码标准化很重要
    • 实施方法 人为约定 工具实现Lint

    常见的规范化实现

    ESLint使用

    • 定制ESLint校验规则
    • ESLint对TS的支持
    • ESLint结合自动化工具或webpack
    • ESLint的衍生工具
      Stylelint工具的使用

    ESLint介绍

    最为主流的JS lint工具检测JS代码质量
    ESLint很容易统一开发者风格
    ESLint 可帮助提升编码能力

    ESLint安装

    步骤

    初始化项目
    安装ESLint模块作为开发依赖
    通过CLI命令验证安装结果
    npm init --yes
    npm install eslint --save-dev  作为项目依赖安装到项目
    在node_modules下bin目录会多出一个ESlint的可执行文件
    cd .\node_modules
    cd .\.bin
    .\eslint --version  查看安装版本   
    或者直接 yarn --version
    或者  npx eslint --version
    

    使用

    ESLint 检查步骤
    编写问题代码
    使用eslint执行检测
    完成eslint使用配置

    新建 js 文件

    const foo = 123;
    function fn(){
        console.log('hello')
       
       
       
                console.log('eslint');   
    }
    
    fn (
        syy()
    

    执行
    npx eslint js文件名
    会显示错误并提示没有eslint的配置文件

    新建eslint配置文件

    npx eslint --init

    一般配置选项选择第三项 ,代码检查语法等都包含
    第二选择项 是指模块化标准
    第三项是选择哪个框架
    第四项是否使用TS
    第五项选择 运行环境
    第六项 选择代码风格
    最后一项选择 配置文件格式 js/json/yaml

    会在项目下 新增  .eslintrc.js
    再次执行  npx eslint   js文件名     
    会将错误抛出
    执行  npx eslint js文件名  --fix   修改语法风格错误
    

    ESLint 配置文件解析

    修改关闭某些校验规则
    默认配置文件

    module.exports = {
      'env': {  // 标记当前代码运行环境
        'browser': true, // 代码运行在浏览器环境中
        'es2021': true,  
      },
      'extends': [  // 进行一些共享的配置,例如 google 的代码配置,可支持多个
        'google',
      ],
      'parserOptions': { // 设置语法解析器的相关配置,如果修改ecmaVersion:5 ,就使用不了es6代码特性
        'ecmaVersion': 12,
      },
      'rules': { /配置eslint 规则中每个规则的开启或者关闭
         // 'no-alert': 'off/on/error'  开启,关闭,或者警告
      },
      globals: { // 在代码中使用的全局成员,但是新版特性已经不在体现
          "jQuery": 'readonly',  // 可以在其他js文件中直接使用 jQuery
      }
    };
    

    ESLint 配置注释

    const str1 = "${name} is a coder"
    console.log(str1);
    
    1:14  error  Strings must use singlequote                   quotes    
    1:34  error  Missing semicolon                              semi      
    2:19  error  Newline required at end of file but not found  eol-last  
    

    http://eslint.cn/docs/user-guide 官方网站

    ESLint 结合自动化工具

    集成之后,ESLint 一定会工作
    项目统一,管理更加方便
    结合webpack
    以loader形式集成到webpack中,先将打包js代码之前,通过ESLint校验

    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    module.exports = {
      mode: 'production',
      entry: './src/main.js',
      module: {
        rules: [
          {
            test: /\.js$/, 
            exclude: /node_modules/, 
            use: 'babel-loader'
          },
          {
            test: /\.js$/, 
            exclude: /node_modules/, 
            use: 'eslint-loader',  // loader是从后向前执行,放到js最后
            enforce: 'pre'
          },
          {
            test: /\.css$/, 
            use: [
              'style-loader',
              'css-loader'
            ]
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: 'src/index.html'
        })
      ]
    }
    

    执行 npx webpack 执行打包
    会抛出错误
    react 使用 需要安装
    npm install eslint-plugin-react

    module.exports = {
      'env': {
        'browser': true,
        'es2021': true,
      },
      'extends': [
        'google',
      ],
      'parserOptions': {
        'ecmaVersion': 12,
      },
      'rules': {
        'react/jsx-uses-react': 2,
        'react/jsx-uses-vars': 2
      },
      plugins:[
        'react'
      ]
    };
    

    现代化项目集成ESLint

    vue集成使用eslint
    npm install @vue/cli -g    //全局安装vue
    vue create syy-vue-app 
    可选择eslint选项
    启动项目自动校验
    

    ESLint 校验TS

    module.exports = {
      env: {
        browser: true,
        es2020: true
      },
      extends: [
        'standard'
      ],
      parser: '@typescript-eslint/parser',
      parserOptions: {
        ecmaVersion: 11
      },
      plugins: [
        '@typescript-eslint'
      ],
      rules: {
      }
    }
    

    Stylelint 认识

    提供默认的代码检查规则
    提供cli弓,快速调用
    通过插件支持Sass Less PostCSS
    支持Gulp或Webpack 集成

    使用可以参考ESLint
    安装
    npm install stylelint -D
    npx stylelint ./index.css 测试
    npm install stylelint-config-standard
    安装配置文件 .stylelint.js

    module.exports = {
        extends: "stylelint-config-standard"
    }
    

    npx stylelint ./index.css --fix 修复

    使用sass

    npm install stylelint-config-sass-guidelines -D

    module.exports = {
        extends: [
            "stylelint-config-standard",
            "stylelint-config-sass-guidelines"
        ]
    }
    

    Prettier

    一款通用的前端代码格式化工具,可以使用其完成代码自动格式化,或是markdown等的格式化操作
    npm install prettier -D
    测试 npx prettier style.css
    npx prettier style.css --write 覆盖原文件
    npx prettier . --write 覆盖所有原文件

    Git Hooks
    代码未提交至仓库前未执行lint工作
    通过Git Hooks在提代码前强制lint
    git Hooks也称为git 钩子,每个钩子都对应一个任务
    通过shell脚本可以编写钩子任务触发时具体执行的操作
    通过钩子可执行eslint操作

    展开全文
  • eslint

    万次阅读 2017-11-12 15:20:34
    ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。 首先,安装 ESLint。 $ npm i -g eslint 然后,安装 Airbnb 语法规则,以及 import、a11y、react 插件。 $ npm i -g ...

    es6笔记 习自 阮一峰开源项目 

    查看es6的浏览器支持情况kangax.github.io/es5-compat-table/es6/


    ESLint的使用

    ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。

    首先,安装 ESLint。

    $ npm i -g eslint

    然后,安装 Airbnb 语法规则,以及 import、a11y、react 插件。

    $ npm i -g eslint-config-airbnb
    $ npm i -g eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

    最后,在项目的根目录下新建一个.eslintrc文件,配置ESLint。

    {
      "extends": "eslint-config-airbnb"
    }

    现在就可以检查,当前项目的代码是否符合预设的规则。

    index.js文件的代码如下。

    var unusued = 'I have no purpose!';
    
    function greet() {
        var message = 'Hello, World!';
        alert(message);
    }
    
    greet();

    使用 ESLint 检查这个文件,就会报出错误。

    $ eslint index.js
    index.js
      1:1  error  Unexpected var, use let or const instead          no-var
      1:5  error  unusued is defined but never used                 no-unused-vars
      4:5  error  Expected indentation of 2 characters but found 4  indent
      4:5  error  Unexpected var, use let or const instead          no-var
      5:5  error  Expected indentation of 2 characters but found 4  indent
    
    ✖ 5 problems (5 errors, 0 warnings)

    上面代码说明,原文件有五个错误,其中两个是不应该使用var命令,而要使用letconst;一个是定义了变量,却没有使用;另外两个是行首缩进为4个空格,而不是规定的2个空格。








    展开全文
  • EsLint

    2019-09-07 21:43:26
    eslint 是代码规范的一种工具,下面我们来看看使用eslint 如何比较好地在webpack 中配置。 先,我们下载eslint 到项目。 npm install eslint --save-dev 然后,我们可以使用命令初始化eslint 的配置文件(/....

    eslint 是代码规范的一种工具,下面我们来看看使用eslint 如何比较好地在webpack 中配置。

    先,我们下载eslint 到项目。

    npm install eslint --save-dev

    然后,我们可以使用命令初始化eslint 的配置文件(/.eslintrc.js)

    npx eslint --init

    按照它给我们的问题选择好选项后,就会在项目根目录下生成eslint 的配置文件 .eslintrc.js 

    此时,我们想要查看代码是否符合eslint 配置中的要求,可以在命令行使用命令:

    npx eslint src

    这行代码,就会使得eslint 去检测src 下的代码是否符合规则。

    在VS code 中,我们可以安装 eslint 插件,这样就可以在编辑器内直接看到代码的不符合规范的地方了。

    展开全文
  • vue 关闭vue项目中烦死人的ESlint

    万次阅读 多人点赞 2018-04-04 11:44:51
    【已解决】vue 关闭vue项目中烦死人的ESlint 很多时候,因为一些书写问题,ESlint会报错。
  • eslint插件eslint插件 ESLint插件,用于整理ESLint插件 安装 您首先需要安装 : $ npm i eslint --save-dev 接下来,安装eslint-plugin-eslint-plugin : $ npm install eslint-plugin-eslint-plugin --save-dev ...
  • eslint插件eslint评论 用于ESLint指令注释的其他ESLint规则(例如//eslint-disable-line )。 :open_book: 用法 :horizontal_traffic_light: 语义版本控制策略 eslint-plugin-eslint-comments遵循和。 :...
  • eslint-config-eslint": "^5.0.0", + "eslint-plugin-node": "^7.0.1", + "istanbul": "^0.4.5",</p><p>该提问来源于开源项目:eslint/espree</p></div>
  • eslint-plugin-babel 注意:eslint-plugin-babel现在是@babel/eslint-plugin并且已移入 。 eslint插件伴侣, babel-eslint 。 babel-eslint在使eslint与Babel eslint使用babel-eslint做得很好,但是它不能更改内置...
  • JavaScript ESLint规则 JavaScript ESLint捆绑了最佳实践和通用规则,用于编写更一致的代码。 其他类似的捆绑包: , , 和 安装 npm install @asd14/eslint-config --save-dev 目标 运行npm info "@asd14/eslint-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 33,046
精华内容 13,218
关键字:

eslint