安装一系列eslint插件后,填写eslint配置,配置如下

.editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true .eslintignore /build/
/config/
/dist/
/static/js
/src/test
**/*.js .eslintrc.js module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true,
},
globals: {
'AMap': true,
'$': true
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
plugins: [
'html',
'vue'
],
rules: {
'generator-star-spacing': 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'semi': ['error', 'never'],
'no-extra-semi': "error",
'eqeqeq': 0,
'spaced-comment': 0,
'keyword-spacing': 0,
"quotes": [0, "single"],
'comma-dangle': 0,
'curly': 0,
'no-unused-expressions': 0,
'padded-blocks': ["error", "never"],
'space-before-function-paren': ["error", "always"],
'no-mixed-operators': 0,
'operator-linebreak': 0,
'camelcase': 0,
'no-lone-blocks': 0,
'no-new': 0,
'one-var': 0,
'no-unneeded-ternary': 0
}
} webpack.base.conf.js {
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
exclude: [resolve('src/components/upload')],
options: {
formatter: require('eslint-friendly-formatter'),
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
}, User Settings {
"window.zoomLevel": 1,
"files.autoSave": "off",
"vetur.validation.template": false,
"search.followSymlinks": false,
"editor.tabSize": 2,
"editor.parameterHints": true,
"editor.quickSuggestions": {
"other": true,
"comments": true,
"strings": true
},
"workbench.colorTheme": "Solarized Dark", // 单引号
"prettier.singleQuote": true,
// 不加分号
"prettier.trailingComma": "all",
//去掉代码结尾的分号
"prettier.semi": false,
"vetur.format.defaultFormatter.js": "vscode-typescript",
// 使用 js-beautify-html 插件格式化 html
"vetur.format.defaultFormatter.html": "js-beautify-html",
//开启 eslint 支持
"prettier.eslintIntegration": true,
//每次保存自动格式化
"editor.formatOnSave": true,
// 每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
// 格式化插件的配置
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// 属性强制折行对齐
"wrap_attributes": "force-aligned",
}
},
//让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
//去掉分号
"stylusSupremacy.insertSemicolons": false,
//#去掉大括号
"stylusSupremacy.insertBraces": false,

eslint规范项目代码的更多相关文章

  1. ESLint 规范项目代码

    ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写, 2013 年发布第一个版本. NCZ 以可扩展.每条规则独立.不内置编码风格为理念编写了一个 lint ...

  2. Visual Studio Code 使用 ESLint 增强代码风格检查

    前言 在团队协作开发中,为了统一代码风格,避免一些低级错误,应该设有团队成员统一遵守的编码规范.很多语言都提供了Lint工具来实现这样的功能,JavaScript也有类似的工具:ESLint.除了可以 ...

  3. ESLint 检查代码质量

    利用 ESLint 检查代码质量 其实很早的时候就想尝试 ESLint 了,但是很多次都是玩了一下就觉得这东西巨复杂,一执行检查就是满屏的error,简直是不堪入目,遂放弃.直到某天终于下定决心深入看 ...

  4. Webpack 2 视频教程 010 - 配置 ESLint 实现代码规范自动测试 (下)

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  5. Webpack 2 视频教程 009 - 配置 ESLint 实现代码规范自动测试 (上)

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  6. 利用 ESLint 检查代码质量

    原文发表于作者的个人博客:http://morning.work/page/maintainable-nodejs/getting-started-with-eslint.html 其实很早的时候就想 ...

  7. 六、取消eslint 校验代码

    一.取消eslint 校验代码 删除 "eslintConfig": { "root": true, "env": { "node ...

  8. vscode如何安装eslint插件 代码自动修复

    ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 方法和步骤: 通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package. ...

  9. Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南

    Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多 ...

随机推荐

  1. 一键备份脚本 backup.sh

    做网站最重要的是什么?数据!数据,是网站之本,备份,是每一个站长都应该重视的事情.但同时,备份也是一件繁琐和重复的事情.所以,这些事情,肯定能做到自动化的.下面来介绍一下这个一键备份脚本 backup ...

  2. 管道命令'|' 和xargs find命令找到后把所有找到的删除

    管道符号,是unix功能强大的一个地方,符号是一条竖线:"|", 用法: command 1 | command 2 他的功能是把第一个命令command 1执行的结果作为comm ...

  3. WPF 修改数据后更新UI

    ObservableCollection<T> 只有项添加或删除才会更新UI 要想属性发生变动后立刻更新到UI,必须继承 INotifyPropertyChanged 接口,示例如下 pu ...

  4. Quartz 配置文件属性

    主要配置 Property Name Req'd Type Default Value org.quartz.scheduler.instanceName no string 'QuartzSched ...

  5. 谭浩强 c++程序设计第一章课后习题 第10题

    #include <iostream> using namespace std; int main() { int a,b,c; cout<<"请输入三个整数类型的数 ...

  6. node的webserver模板

    const express = require('express'); const swig =require('swig'); const fs = require('fs'); //创建服务器 c ...

  7. gulp的常用插件

    gulp和webpack的差别:https://www.cnblogs.com/lovesong/p/6413546.html var gulp = require('gulp'); var del ...

  8. 【贪心 二分图 线段树】cf533A. Berland Miners

    通过霍尔定理转化判定方式的一步还是很妙的 The biggest gold mine in Berland consists of n caves, connected by n - 1 transi ...

  9. 制定RPM包和加入YUM源

    ##################################################### ##如有转载,请务必保留本文链接及版权信息 ##欢迎广大运维同仁一起交流linux/unix ...

  10. HTML5实现获取地理位置信息并定位功能

    HTML5提供了地理位置定位功能(Geolocation API),能确定用户位置,我们可以借助HTML5的该特性开发基于地理位置信息的应用.本文结合实例给大家分享如何使用HTML5,借助百度.谷歌地 ...