eslint规范项目代码
安装一系列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规范项目代码的更多相关文章
- ESLint 规范项目代码
ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写, 2013 年发布第一个版本. NCZ 以可扩展.每条规则独立.不内置编码风格为理念编写了一个 lint ...
- Visual Studio Code 使用 ESLint 增强代码风格检查
前言 在团队协作开发中,为了统一代码风格,避免一些低级错误,应该设有团队成员统一遵守的编码规范.很多语言都提供了Lint工具来实现这样的功能,JavaScript也有类似的工具:ESLint.除了可以 ...
- ESLint 检查代码质量
利用 ESLint 检查代码质量 其实很早的时候就想尝试 ESLint 了,但是很多次都是玩了一下就觉得这东西巨复杂,一执行检查就是满屏的error,简直是不堪入目,遂放弃.直到某天终于下定决心深入看 ...
- Webpack 2 视频教程 010 - 配置 ESLint 实现代码规范自动测试 (下)
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- Webpack 2 视频教程 009 - 配置 ESLint 实现代码规范自动测试 (上)
原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
- 利用 ESLint 检查代码质量
原文发表于作者的个人博客:http://morning.work/page/maintainable-nodejs/getting-started-with-eslint.html 其实很早的时候就想 ...
- 六、取消eslint 校验代码
一.取消eslint 校验代码 删除 "eslintConfig": { "root": true, "env": { "node ...
- vscode如何安装eslint插件 代码自动修复
ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 方法和步骤: 通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package. ...
- Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南
Vue2/3 项目中的 ESLint + Prettier 代码检测格式化风格指南 因为平时都是使用 VSCode ESLint + Prettier 检测格式化不规范代码,但是随着接手的项目越来越多 ...
随机推荐
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getSer
这其实就是 获得应用的根url,比如说你的应用的根路径是 http://localhost:8080,那么你列出的代码就是为basePath赋值为 http://localhost:8080.具体点: ...
- 项目开发中dev、test和prod是什么意思
开发环境(dev):开发环境是程序猿们专门用于开发的服务器,配置可以比较随意,为了开发调试方便,一般打开全部错误报告. 测试环境(test):一般是克隆一份生产环境的配置,一个程序在测试环境工作不正常 ...
- flutter 踩坑总结
导入第三方库踩坑小结: (编译器:VsCode) ( 打算在学习中,使用flutter重新自己的项目,遇到比较特殊的坑,就先记录一下,持续更新中) 1.把第三方库 写入pubspec.yaml文件中 ...
- 使用FolderBrowserDialog组件选择文件夹
实现效果: 知识运用: FolderBrowserDialog组件的ShowDialog方法 //弹出选择路径对话框 public DialogResult ShowDialog() 和Selecte ...
- 2018.5.23 创建用户并授权&&&序列
作业一 视图的创建 1.分页查询2-3范围之间的数据,并用视图(view_student_page)保存. create view view_student_page as select * from ...
- Java控制语句例题,for循环语句,if条件语句等,Scanner类与Random类,Math.max()方法
例题:编写程序,生成5个1至10之间的随机整数,并打印结果到控制台 import java.util.Random;class demo09 { public static void main(Str ...
- oc数组遍历
#import <Foundation/Foundation.h> //数组遍历(枚举)对集合中的元素依此不重复的进行遍历 int main(int argc, const char * ...
- 第十四篇、OC_新闻查看器
PageTitleView: #import <UIKit/UIKit.h> @class GFBPageTitleView; @protocol GFBPageTitleViewDele ...
- js display, visible 区别
注意: display:none和visible:hidden都能把网页上某个元素隐藏起来,在视觉效果上没有区别,但是在一些DOM操作中两者有区别: display:none ---不为被隐藏的对象保 ...
- Vue3.0脚手架搭建
https://www.jianshu.com/p/fbcad30031c2 vue3.0官网:https://cli.vuejs.org/zh/guide/ 介绍: notice: 这份文档是对应 ...