【초보자】vscode-eslint로 TypeScript를 자동 성형
참고로 한 사이트는 이하입니다. 제대로 된 정보를 원하시는 분은 아래 링크를 참조하십시오.
htps // // cs. 메아/엔트리/16329
htps : // 기주 b. 코 m / 미 c 로소 ft / vs 코데에 s t / issue s / 284
폴더 구성
./
├ dist
├ node_modules
├ src
│ └ main.ts
├ .eslintrc.json
├ index.html
├ package-lock.json
├ package.json
├ tsconfig.json
└ webpack.config.js
준비
package.json
{
"name": "hogehoge",
"version": "1.0.0",
"description": "",
"main": "./src/main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^5.4.0",
"eslint-config-prettier": "^3.0.1",
"eslint-plugin-prettier": "^2.6.2",
"eslint-plugin-typescript": "^0.12.0",
"prettier": "^1.14.2",
"ts-loader": "^4.5.0",
"typescript": "^3.0.3",
"typescript-eslint-parser": "^18.0.0",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
}
}
$ npm i
실행.eslintrc.json
{
"env":{
"browser": true,
"node":true,
"es6": true
},
"globals": {},
"parser": "typescript-eslint-parser",
"plugins": ["typescript"],
"extends": [
"eslint:recommended",
"plugin:prettier/recommended"
],
"rules": {
"no-undef": "off",
"no-unused-vars":"off",
"no-console":"off",
"prettier/prettier": [
"error",
{
"trailingComma": "es5"
}
]
},
"parserOptions": {
"sourceType": "module"
}
}
tsconfig.json
{
"compilerOptions": {
"sourceMap": true,
"target": "es5",
"module": "es2015"
}
}
webpack.config.js
module.exports = {
mode: "development",
entry: "./src/main.ts",
module: {
rules: [
{
test: /\.ts$/,
use: "ts-loader",
},
],
},
resolve: {
extensions: [".ts"],
},
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>
VSCode 설정
ESLint 확장 기능 설치
htps : // 기주 b. 코 m / 미 c 로소 ft / vs 코데에 s t
mac이라면
⌘ + ,
를 눌러 설정 파일을 열고 다음을 추가하십시오.{
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{"language": "typescript", "autoFix": true },
{"language": "typescriptreact", "autoFix": true }
]
}
./src/main.ts에 typescript를 기술하고
⌘ + s
로 저장할 때 자동으로 성형해 주었습니다.※www.typescriptlang.org에서 샘플이 될 것 같은 코드를 복사
h tp // w w. ty psc pt ぁ g. rg/do cs/단 d보오 k/ty페스크 pt-인-5-미누테 s. HTML
./src/main.ts
class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
브라우저에서도 동작 확인해 둔다
npx webpack && open index.html
를 실행끝까지 읽어 주셔서 감사합니다 m (_ _) m
Reference
이 문제에 관하여(【초보자】vscode-eslint로 TypeScript를 자동 성형), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/okumurakengo/items/7989645848cff12f4e33텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)