站长资源
中国站长网站

在vscode中配置prettier和eslint来统一我们的代码规范

之前写过一篇webstorm中使用prettire统一代码风格

传送门:https://www.wangdahai.cn/web/other-extension/7302.html

然后就有小伙伴问我vscode中怎么使用,还有如何配合eslint使用。其实与什么编辑器无关,没有编辑器只要有node环境支持也一样可以使用,步骤如下:

1,只需全局安装prettier和eslint

npm install -g prettier
npm install eslint -g

2,然后新建配置文件

.prettierrc.js
.eslintrc.js

3,然后执行命令

prettier --write <文件路劲+文件名>
eslint --fix <文件路劲+文件名>

用编辑只是简化了我们的操作,可以保存时候自动帮你执行优化修复操作了。无论是webstorm还是vscode都是有相关的插件支持的,我们要做的只是安装相应插件,然后自定义自己的规则即可。

今天就以vscode为例为大家讲解一下prettier和eslint的使用

一,安装相应插件

ESLint
Prettier

在vscode中配置prettier和eslint来统一我们的代码规范 -1

二,设置

安装完成我们点开设置,然后点击右上角如图:打开settings.json

在vscode中配置prettier和eslint来统一我们的代码规范 -2

在settings.json中粘贴如下代码

设置文件的默认格式化工具为prettier

"prettier.tabWidth": 4,
"[html]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
}

设置文件保存后使用eslint自动验证修复

"editor.codeActionsOnSave": {
 "source.fixAll.eslint": true
},
"eslint.validate": [
 "javascript"
]

设置保存自动运行格式化,即运行prettier(因为们设置了默认格式化工具为prettier)

"editor.formatOnSave": true


到这里就已经可以使用了,如果需要自定义配置请继续往下看

三、配置自定义规则

配置自定义规则可以在settings.json中配置,也可以在单独的配置文件中配置

新建prettier配置文件.prettierrc.js 例如:

module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 使用 2 个空格缩进
    tabWidth: 4,
    // 不使用缩进符,而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: false,
    // 使用单引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号,而使用双引号
    jsxSingleQuote: false,
    // 末尾不需要逗号
    trailingComma: 'none',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数,只有一个参数的时候,也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf
    endOfLine: 'auto'
}

不需要优化的文件可以设置.prettierignore文件 例如:

**/*.md
**/*.svg
**/*.ejs
package.json
package-lock.json

新建eslintrc配置文件.eslintrc.js 例如:

module.exports = {
    env: {
        browser: true, //启用浏览器全局变量。
        commonjs: true, //CommonJS全局变量和CommonJS范围。
        es6: true // 启用ES6的功能。
    },
    // 规则("off"或0-关闭规则、"warn"或1-将该规则作为警告、"error"或2-将规则作为错误)
    rules: {
        indent: ['error', 4], // 缩进使用几个空格
        'linebreak-style': ['error', 'windows'], // (unix|windows)使用windows行结束符:\r\n
        quotes: ['error', 'single'], // 使用双引号还是单引号
        semi: ['error', 'never'], // 末尾是否加分号;
        'comma-dangle': ['error', 'never'] // 对象数组末位要不要加逗号
    }
}

同样不想检测的位置可以写进.eslintignore文件,比如:

node_modules
dist/
test
build/

到这里prettier和eslint在vscode中的使用就讲解完毕了,赶紧愉快的撸起你的代码吧 O(∩_∩)O

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 在vscode中配置prettier和eslint来统一我们的代码规范

评论 抢沙发

评论前必须登录!