工作中遇到的vscode配合eslint完成保存为eslint格式
2024-09-02 16:05:53
vscode个人设置
// vscode的个人设置配置
{
"workbench.iconTheme": "vscode-icons",
"workbench.colorTheme": "Dracula Italics",
"vetur.format.defaultFormatter.js": "prettier",
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"editor.quickSuggestions": {
"strings": true
},
"eslint.autoFixOnSave": true,
// "eslint.nodePath": "D:/develop/nvm/nodejs",
"editor.formatOnSave": true,
"editor.tabSize": 2,
"eslint.options": {
"plugins": [
"html"
],
"configFile": "项目目录下.eslintrc.js绝对路径"
},
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue",
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
}
],
"prettier.disableLanguages": [
"vue",
"js"
],
"prettier.singleQuote": true,
"prettier.semi": false,
"prettier.stylelintIntegration": true,
}
// eslintrc.js配置
module.exports = {
root: true,
// EsLint默认使用esprima做脚本解析,也可以切换他,比如切换成babel-eslint解析
parser: 'babel-eslint',
parserOptions: {
//指定来源的类型,有两种”script”或”module”
sourceType: 'module'
},
// Environment可以预设好的其他环境的全局变量,如brower、node环境变量、es6环境变量、mocha环境变量等
env: {
browser: true
},
// Extends是EsLint默认推荐的验证,你可以使用配置选择哪些校验是你所需要的,可以登录npmjs.com查看
extends: 'standard',
// required to lint *.vue files
plugins: ['vue', 'html'],
// add your custom rules here
rules: {
// allow async-await
'generator-star-spacing': 'off',
// 箭头函数的参数使用圆括号,0是关闭规则"off",1是警告"warn",2是报错"error"
'arrow-parens': 0,
// 强制 generator 函数中 * 号周围使用一致的空格
'generator-star-spacing': 0,
// 函数周围空格的设置
'space-before-function-paren': [
'error',
{
anonymous: 'never',
named: 'never',
asyncArrow: 'always'
}
],
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 要求使用error对象作为promise拒绝的原因
'prefer-promise-reject-errors': 'off',
'padded-blocks': 0
}
}
vscode插件安装
- beautify 美化代码 好像没用到 安全起见先加上
- Bracket Pair Colorizer 美化括号 让你的括号看起来更好看
- Dracula theme 一个主题 随便装不装
- Dracula Theme with Italic keywords 刚才那个主题的配套设施,内容看起来是斜体,有点意思
- EditorConfig for Visual Studio Code 代码风格配置插件
- eslint 不多说 就装吧
- JavaScript standard style standard标准编码风格
- Path Intellisense 自动完善路径
- prettier 代码格式化
- veture vue大礼包
- vscode-icons 美化图标
需要的项目环境
- npm install eslint eslint-plugin-html babel-eslint eslint-plugin-vue eslint-config-standard eslint-friendly-formatter --save-dev
- npm install eslint-loader eslint-plugin-import eslint-plugin-node eslint-plugin-promise --save-dev
- 可以全局装 也可以项目装,不要全局安装和本地安装混合,那样在执行命令的时候全局容易找不到本地的配置,本地找不到全局的包
- node_modules/.bin/eslint --fix path/to/要eslint的文件 可以对文件进行eslint规则修复
参考文档
最新文章
- 2、HTML 基础知识
- [原创.数据可视化系列之一]使用openlayers 3 显示聚合数据
- 【Javascript Demo】移动端访问PC端网页时跳转到对应的移动端网页
- 获取json对象长度的问题
- 了解常见的 Azure 灾难
- 【开源java游戏框架libgdx专题】-02-Eclipse Gradle 环境安装
- UVA10199- Tourist Guide(割点)
- (十)boost库之多线程
- matlab实现协同过滤之pdist、squareform
- bash color
- 如何在嵌入式Linux上开发一个语音通信解决方案
- 关于LINUX里面查找,替换,编辑的一些用法
- Python系列之 - 上下文管理协议
- #20175204 张湲祯 2018-2019-2《Java程序设计》第六周学习总结
- 炫龙炎魔T1笔记本 Win7 系统安装
- vue created中初始化属性
- Debian 8.x / Ubuntu 16.04.x 搭建 Ghost 教程
- sql-leetcode Consecutive Numbers
- jvm理论-字节码指令
- Linux之Ubuntu与Windows更改默认启动顺序[转载]