一、什么是Eslint
通过查看eslint官网(官网传送门),我们就可以知道,eslint就是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,主要用来检测代码风格是不是符合指定的规则/规范,这样有利于团队开发的时候代码风格统一,.毕竟每个人的代码风格不一致,使用eslint代码校验工具就保证了代码风格的统一性。
二、什么Prettier
通过查看prettier官网(官网传送门),我们就知道,prettier是一个代码格式化工具,包括JavaScript (including experimental features)、JSX、Angular、Vue、Flow、TypeScript、CSS, Less, and SCSS、HTML、JSON、GraphQL、Markdown, including GFM and MDX、YAML各种语言,简而言之,这个工具能够使输出代码保持风格一致。
三、vs Code安装相关插件
在这里我默认你已经安装好了vs Code,如果还没有安装后者不知道怎么安装也没关系,可以查看安装vs Code的其他博客,我这里不在赘述。vs Code安装好之后,这里要介绍几个常用的插件,可以灵活使用,以方便使用提高效率为原则。
1、Vetur: vue语法高亮插件;
2、ESlint
语法错误检测工具;
3、HTML Snippets
回车或按下Tab键生成标签;
4、Auto Rename Tag
自动修改匹配的标签;
5、prettier
代码格式化工具;
四、vs Code格式化相关配置
vs Code格式化插件有很多,这里首推prettier,可以根据自己的需求进行配置,并且设置format on save,就会在代码格式化的时候自动保存
{
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_line_length": 200,
"wrap_attributes": "auto",
"end_with_newline": false
}
},
//分号
"prettier.semi": false,
"prettier.singleQuote": true, //使用单引号替代双引号
"prettier.eslintIntegration": true,
//函数前加空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"eslint.alwaysShowStatus": true,
"eslint.autoFixOnSave": true,
"eslint.workingDirectories": [
".eslintrc.js",
{
"mode": "auto"
}
],
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "vue", "autoFix": true }
],
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
//默认JavaScript格式化程序(为了更美观)
"javascript.format.enable": true,
"prettier.arrowParens": "avoid",
}
五、eslint相关配置
eslint先关配置跟prettier结合起来,设置prettier的eslintIntegration属性为true,就可以根据eslint相关配置规则格式化代码,相关配置如下,更多配置规则请查看官网
// https://eslint.org/docs/user-guide/configuring module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true
// "jest":true
},
// required to lint *.vue files
plugins: ['vue'],
extends: ['plugin:vue/essential', 'standard'],
// add your custom rules here
rules: {
// allow async-await
camelcase: 'off',
'no-console': 'error',
'standard/no-callback-literal': 'off',
'generator-star-spacing': 'off',
'space-before-function-paren': [
'error',
{
anonymous: 'always',
named: 'never',
asyncArrow: 'never'
}
],
'func-call-spacing': ['error', 'never'],
'vue/no-mutating-props': 'nerve',
// allow debugger during development
// 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': 'error',
'template-curly-spacing': 'off',
quotes: ['error', 'single'],
// 强制不使用分号结尾
semi: ['error', 'never'],
indent: [
'error',
2,
{
ignoredNodes: ['TemplateLiteral', 'ConditionalExpression'],
SwitchCase: 1
}
]
// end 解决eslint报错问题
}
}
在setting.json中设置一下配置,可在格式化的时候自动安装eslint规则修复不符合规范的代码。
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "vue", "autoFix": true }
],
vs Code + Eslint + Prettier 代码格式化(vue开发)的更多相关文章
-
vscode如何配置ts的lint,如何配置才能让eslint和prettier不冲突一键格式化代码(vue开发使用)
最近在使用ts,发觉tslint在vscode上使用很不方便,不如eslint一键格式化高效,就想着能不能配置下vscode让其像写js一样爽 这篇文章主要解决2个问题,第一个是如何让vscode使用 ...
-
vs code 设置 保存自动格式化vue代码
配置 ESLint (需安装 Prettier - Code formatter 插件) command + shift + p 打开用户设置 // vscode默认启用了根据文件类型自动设置tab ...
-
在IntelliJ IDEA中配置Google Java Code Style及代码格式化快捷键
google-java-format plugin should intercept the “Reformat Code” action in IDEA (Ctrl+Alt+L) and apply ...
-
eslint prettier vetur eslint
VScode (版本 1.47.3)安装 eslint prettier vetur 插件 .vue 文件使用 vetur 进行格式化 在文件 .prettierrc 里写 属于你的 pettier ...
-
ESLint 检查代码质量
利用 ESLint 检查代码质量 其实很早的时候就想尝试 ESLint 了,但是很多次都是玩了一下就觉得这东西巨复杂,一执行检查就是满屏的error,简直是不堪入目,遂放弃.直到某天终于下定决心深入看 ...
-
利用 ESLint 检查代码质量
原文发表于作者的个人博客:http://morning.work/page/maintainable-nodejs/getting-started-with-eslint.html 其实很早的时候就想 ...
-
在vscode中使用eslint+prettier格式化vue项目代码 (转载)
ESlint:javascript代码检测工具,可以配置每次保存时格式化js,但每次保存只格式化一点点,你得连续按住Ctrl+S好几次,才格式化好,自行体会~~ vetur:可以格式化html.标准c ...
-
VS Code 自动修改和保存 代码风格 == eslint+prettier
最近因为用到VS Code,需要统一所有人的代码风格(前端语言js/html/css等,或者后端语言 go/python等也可以这么用). 所以参考了一些网络资料,记录下设置步骤,以便后续查阅. St ...
-
vs code中Vue代码格式化的问题
个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! VSCode自从更新之后,vue文件的html代码格式化就失效了,而且vu ...
随机推荐
-
The Flat Dictionary
The Flat Dictionary 原来的代码没处理dict为空的情况 1 def flatten(dictionary): 2 #[] is a list 3 #() is a tuple 4 ...
-
JAVA基础第三组(5道题)
11 [程序11] 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 1.程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件 ...
-
Apache shiro集群实现 (三)shiro身份认证(Shiro Authentication)
Apache shiro集群实现 (一) shiro入门介绍 Apache shiro集群实现 (二) shiro 的INI配置 Apache shiro集群实现 (三)shiro身份认证(Shiro ...
-
Qt中OpenGL模块下将图片转化为纹理,并传入shader中
QImage texture, buffer; buffer.load("C:/Users/wukesong/Pictures/flower.jpg"); texture = QG ...
-
让我对 docker swarm mode 的基本原理豁然开朗的几篇英文博文
关于 docker swarm mode 的基本架构 How does it work? Docker! Part 1: Swarm general architecture 关于 Overlay N ...
-
Mysql 中如何创建数据库和数据表
这里的数据库为:user 数据表为 aaa mysql –uroot –p 进入mysql create database user; 创建数据 ...
-
DAG 的最短路径算法
求图中节点的单源最短路径可以使用Dijkstra,BellmanFord, SPFA算法,而对于有向无环图DAG来说,可以通过简单的动态规划来进行求解. DAG的独特之处是所有节点可以线性化( ...
-
所有和Java中代理有关的知识点都在这了。
对于每一个Java开发来说,代理这个词或多或少都会听说过.你可能听到过的有代理模式.动态代理.反向代理等.那么,到底什么是代理,这么多代理又有什么区别呢.本文就来简要分析一下. 代理技术,其实不只是J ...
-
Eclipse中快速 打出 main方法的签名
有时,我们创建一个空白类,需要打出main方法 public static void main(String [] args){ } 在Eclipse先敲main字符,然后按住ALT+/,再按回车即可 ...
-
Android AES加密算法及其实现
找到了AES加密算法.(当然还有MD5,BASE64什么的http://snowolf.iteye.com/blog/379860这篇文章列举了很多,但是基本都是j2se平台的,android平台不一 ...