在 vscode 中使用 eslint + eslint-config-prettier + eslint-plugin-prettier 报错问题

使用 vscode 编辑器,在前端项目中,使用 eslint + eslint-config-prettier + eslint-plugin-prettier 有可能会报下面的错误

[eslint] Delete `␍` [prettier/prettier]
原因可能是不同的操作系统下,甚至是不同编辑器,不同工具处理过的文件导致换行符的改变 。

解决方法:

可以修改 .eslintrc 文件,在 rules 添加一条

"prettier/prettier": "off"

vue 项目中如何配置 eslint fix?

修改 package.json 文件,把 script 的 lint 项改成如下:

"lint": "eslint --fix --ext .js,.vue src test/unit"

Vue 项目的 eslint 配置可参考:

https://github.com/PanJiaChen/vue-element-admin/blob/master/.eslintrc.js

vue 项目常见 eslint 配置

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],

    // add your custom rules here
    // base on https://github.com/vuejs/eslint-config-vue
    rules:{
        // 缩进为2个空格
        'vue/html-indent': ['error', 2, {
            'attribute': 1,
            'alignAttributesVertically': true,
            'ignores': []
        }],
        "vue/max-attributes-per-line": [2, {
            "singleline": 10,
            "multiline": {
                "max": 1,
                "allowFirstLine": false
            }
        }],
        'vue/html-self-closing': 'off',
        "vue/name-property-casing": ["error", "PascalCase"],
        // allow async-await
        'generator-star-spacing': 'off',
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        // 关闭检测函数名称和调用它的左括号之间的空格
        // 'func-call-spacing': 'off',
        // 缩进为2个空格
        'indent': ['error', 2],
        // 关闭检测未使用的变量
        'no-unused-vars': 'off',
        // 对象展开时总是要添加逗号,一行时行末不需要逗号
        // 'comma-dangle': ['error', 'always-multiline'],
        // 定义函数时,函数括号之前允许添加空格
        'space-before-function-paren': ['error', 'always'],
        // 关闭禁用无效标签
        'no-tabs': 'off',
        // 关闭空行检测
        'no-multiple-empty-lines': 'off',
        // 关闭模板字符串检测
        'no-template-curly-in-string': 'off',
        'no-console': 'off',
        // 禁止添加分号
        'semi': ['error', 'never']
    }
}

 

作为前端面试官给大家分享一下日常常用试题[原创]

前言

作为前端面试官,几乎每天都要对后选人进行面试。来来去去都是面试那几个问题。但同一个问题,候选人的回答都是多种多样的。

前端面试指南图片

下面就列一些自己日常可能会对候选人问到的一些问题

继续阅读“作为前端面试官给大家分享一下日常常用试题[原创]”

Sass / Scss 样式预处理的一些常用技巧

前言

现在,样式预处理语言已经成了前端进行页面布局编写样式的标配辅助工具,当前已经基本没人去手写纯 css 样式了,在众多样式预处理语言当中,Sass / Scss 及 Less 是最多人使用的样式预处理语言。本文主要是介绍使用 Sass 预处理的一些常用技巧。

使用 Sass 的一些常用技巧

一、@at-root 的使用可以让你突破所在的作用域

我们在编写 sass 时,一般是喜欢让 css 代码形成深度的树结构,但有时如果我们为了不想 sass 给我们生成的 css 样式层次太深(原则是不超过 3 层结构,如:.root .parents .children {color:red;}),想把特定的 css 样式与根节点脱离开来,此时,我们可以使用 Sass 的 @at-root 来实现我们想要的效果,顾名思义,at root 就是让生成的 css 代码以此节点为根节点,不受外层节点影响,但不影响你按树结构来书写 css 代码,sass 代码如下: 继续阅读“Sass / Scss 样式预处理的一些常用技巧”

前端安全之常见问题总结

目录

七、接口敏感信息相关处理常识?
八、低版本的 jQuery 库、其他框架或者前端组件有可能有安全漏洞

正文

一、XSS(Cross Site Scripting) 跨站 JS 脚本攻击,如何防范?

  1. 针对接口进行 XSS 攻击,即把js脚本或者带恶意 js 脚本的 html 标签,作为 GET 或者 POST 参数提交到服务器,然后服务器解释并响应,在响应结果里把脚本或者 html 标签原样返回明显示和执行。这明显是很有问题。防范方式:1)提交数据前前端要做数据校验,对用户输入的信息 (js 代码及 dom 节点) 进行过滤。2)对重要的 cookie 设置为 httponly(服务器端可设置此字段),客户端就没有操作此 cookie 的权限。3)服务器端也要数据合法性校验
  2. 针对 DOM 本身进行 XSS 攻击,如果本身页面代码中使用了 window.eval 来执行代码。eval 本身会把一段字符串变成可执行的 js 代码,这是非常危险的。还有拼接 html 字符串后直接显示 DOM 时也会遇到同样的问题。防范方式:尽量避免使用 eval,拼接 html 字符串时应校验字符串的合法性,过滤非法元素节点与属性节点, 如 iframe,script 标签,onerror 事件, style, src, href 等。

可能产生危害:泄露了个人的 cookie 信息,身份认证被套取后,被用作非法用途
继续阅读“前端安全之常见问题总结”

javascript函数式编程之 函子(functor)

一个最简单的容器,一个最简单的函子

函子functor 是实现了 map 函数并遵守一些特定规则的容器类型。什么是容器?如下是一个最简单的容器。函子则是Mappable的容器。下面的容器实现了map,所以它也是一个最简单的函子
引入数学概念范畴学中的函子是为了要处理一些比较复杂的情况。诸如:控制流(control flow)、异常处理(error handling)、异步操作(asynchronous actions)和状态(state),还有更棘手的副作用(effects)。
继续阅读“javascript函数式编程之 函子(functor)”

javascript函数式编程之 声明式编程(declarative programing)

定义

在计算机科学中,声明式编程是一种编程范式 – 构建计算机程序的结构和元素的一种风格 – 专注于表达计算逻辑,而不需要描述其控制流程。

应用这种风格的许多语言尝试通过描述程序在问题领域中必须完成的内容来最大限度地减少或消除副作用,而不是描述如何将其作为编程语言原函数的序列直到实现。这与命令式编程相反,命令式编程在显式步骤中实现算法。 继续阅读“javascript函数式编程之 声明式编程(declarative programing)”

javascript函数式编程之 无参风格(point-free style)

定义

无参风格是一种编程范例,其中函数定义不能识别它们所运行的参数(或“点”)。 相反,它只是组合(compose)其他函数,在其子函数中操纵参数的组合器。
因为严格使用组合可以很好地适应等式推理的程序,它也是某些编程语言的自然风格,包括APL和诸如Forth之类的连接语言。
例子如下: 继续阅读“javascript函数式编程之 无参风格(point-free style)”

javascript函数式编程之 柯里化(curry)

定义

柯里化(curry)的概念其实可以简单理解为这样,本来有个已存在的函数需要接收多个参数的,现我想要根据需求由此函数打造成一个只有一个或者指定数量参数的新的函数。这里我们引用lodash库来举例,如下:
<script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script> 继续阅读“javascript函数式编程之 柯里化(curry)”

javascript函数式编程之 函数组合(compose)

定义

在函数式编程使用过程中,组合(compose)简单来说就是把两个你喜欢的接入参数一样(最好都是一参的形式,可能过柯里化curry把多参转为一参)的函数把它们组合到一起,产生一个新的函数。如下:

var compose = function(f, g) {
  return function(x) {
    return f(g(x));
  };
};

在这里,我们把fg两个函数组合到一起,它们有共同的参数x,显然在compose组合时,函数的执行顺序是由右向左执行,先执行g(x)再执行f(g),可称之为“左倾”。使用起来如下: 继续阅读“javascript函数式编程之 函数组合(compose)”