精华内容
下载资源
问答
  • 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

    2020-08-28 18:45:49
    eslint 本人用的编辑器是vscode 先下载一个ESLint扩展 然后配置一下,就完成了! { "editor.formatOnSave": false, // 自动修复 "editor.codeActionsOnSave": { "source.fixAll.eslint": true, }, // 配置 ...

    eslint


    本人用的编辑器是vscode
    先下载一个ESLint扩展 然后配置一下,就完成了!

    {
        "editor.formatOnSave": false,
        // 自动修复
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
        },
        // 配置 ESLint 检查的文件类型
        "eslint.validate": [
            "javascript",
            "vue",
            "html"
        ],
        "editor.semanticTokenColorCustomizations": null,
        "files.autoSave": "onFocusChange",
        "launch": {
            "configurations": [],
            "compounds": []
        }
    }
    

    在编程的时候 如果有的变量定义了 但是报未使用时可以在定义的变量后面加上

    // eslint-disable-line no-unused-vars
    
    展开全文
  • 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-config-eslint": "^5.0.0", + "eslint-plugin-node": "^7.0.1", + "istanbul": "^0.4.5",</p><p>该提问来源于开源项目:eslint/espree</p></div>
  • eslint文件

    2018-06-13 16:34:40
    eslint自动处理,webstorm,个人使用。eslint自动处理,webstorm,个人使用。eslint自动处理,webstorm,个人使用。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,964
精华内容 11,185
关键字:

eslint