在vscode中如何用eslint和prettier

在vscode中如何用eslint和prettier,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

目前创新互联已为上千的企业提供了网站建设、域名、虚拟主机、网站托管、服务器租用、企业网站设计、曲沃网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

1. vscode中eslint的使用

1)首先在vscode中安装eslint,然后在vscode的settings.json添加如下代码

"editor.formatOnSave": true, // 保存是格式化
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true // 按照eslint规则格式化
},
"eslint.format.enable": true, // 启用ESLint作为已验证文件的格式化程序

2)必须在项目中安装eslint(或者全局安装)

这个是vscode中eslint插件的要求:

3)在根目录中添加 .eslintrc.js 文件,添加如下代码

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["eslint:recommended"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {}
};

4)rules 里面的设置

quotes: [
   'error',
   'single'
],

semi: ['error', 'never']
  • 属性值数组中第一个元素设置

  • 属性值数组中第二个元素设置

eslint.bootcss.com/docs/rules/ 找到对应属性点击进入,然后找到options

  • eslint:recommended 默认规则的都有标记

注意:此时项目就会按照默认设置,以及rules里面的规则进行提示,保存时也会根据eslint的规则就行格式化。

2. eslint 与 prettier 结合使用

(注:eslint与prettier的结合视情况而定,不是非得要与prettier一起使用)

1)首先在vscode中安装prettier插件,然后在vscode中的 settings.json 里面添加下面的代码

"editor.defaultFormatter": "esbenp.prettier-vscode",

  "[javascript]": {

    "editor.defaultFormatter": "esbenp.prettier-vscode"

  }

2)在项目中安装prettier

同时还需要安装eslint-plugin-prettiereslint-config-prettier,这两个插件的目的就是为了使eslint可以按照prettier的规则进行提示(注意这两个插件的版本号问题,最新的 eslint-plugin-prettier 的4.0版本使用时有问题)

"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.3.1"

然后在 .eslintrc.js里面的extends加上 plugin:prettier/recommended

extends: ["eslint:recommended", "plugin:prettier/recommended"]

然后就可以在根目录下添加.prettierrc.js 文件,eslint将按照里面的规则进行提示,同时保存的时候也会按照里面的规则进行格式化

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
}

3. 在vue项目中使用prettier规则

1)首先在创建的时候选择eslint + prettier的设置

2)在根目录下创建 .prettierrc.js,并添加规则

module.exports = {
  semi: false,
  singleQuote: true,
  bracketSpacing: true,
};

默认情况下,当代码中的格式不正确时,会是warn警告

如果需要把它变成error,需要在.eslintrc.js中添加如下代码

rules: {
//…
  'prettier/prettier': 'error'
}

注:在修改完一些配置后,vscode可以不会马上生效,此时可以关闭项目,重新打开试试

关于在vscode中如何用eslint和prettier问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。

网页名称:在vscode中如何用eslint和prettier
文章链接:https://www.cdcxhl.com/article38/ihsgsp.html

成都网站建设公司_创新互联,为您提供静态网站品牌网站制作网站改版全网营销推广网站导航网站策划

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

搜索引擎优化